webpack (一) 浏览器中显示hello world

╰+攻爆jí腚メ 2022-06-13 07:18 108阅读 0赞

nodejs也安装了， babel编译es5也学了，目前就差使用webpack来如何在现有的浏览器中查看一个简单功能。 自然伟大的hello world 又要粉墨登场咯  
第一步采用webstorm新建项目，具体细节不写了，如果还不会的可以查看我写的另外一篇博客：[新建项目][Link 1]

项目结构如下  
![这里写图片描述][SouthEast]

第二步：webpack.config.js添加到项目中  
由于没有找到啥法子自动创建该文件 我是手动创建的，并将下面内容copy进去

module.exports = {
        entry: './index.js',
        output: {
            path: __dirname,
            filename: 'bundle.js'
        },
        module: {
            loaders: [{
                test: /\.css$/,
                loaders:"style-loader!css-loader"
            }]
        }
    };

添加后的效果  
![这里写图片描述][SouthEast 1]

里面具体的内容含义我就不解释了

第三步 在项目根目录下添加index.css

body { background: cadetblue; }

第四步 在项目根目录下添加index.js

require('./index.css');
    var [name]=["第一个列子"];
    document.write('Hello World!!!!!ddddddddddddddddddddd'+name);

第五步 在项目根目录下添加index.html.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo1</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
    </html>

到此为止文件都添加完毕  
![这里写图片描述][SouthEast 2]

第六步 开始执行命令咯

npm install style-loader --save
    
    npm install css-loader --save
    
    npm install webpack --save-dev

![这里写图片描述][SouthEast 3]  
第七步修改package.json文件，在scripts中添加 start的执行方式

"start": "webpack-dev-server --progress --colors"

![这里写图片描述][SouthEast 4]

第八步 执行npm start 命令启动，如果没有报错误信息则可以输入 [http://localhost:8080/][http_localhost_8080]执行看看效果  
![这里写图片描述][SouthEast 5]

[Link 1]: http://blog.csdn.net/weiyongliang_813/article/details/73929110
[SouthEast]: /images/20220613/c5ced11092e849b38e337cd2b9943046.png
[SouthEast 1]: /images/20220613/7160f3d8364545c7b635f824a0b7a438.png
[SouthEast 2]: /images/20220613/7d9773871bde466f9e45b8ddcbd174b1.png
[SouthEast 3]: /images/20220613/39f9756cc47f452482c0fb52e6d5121f.png
[SouthEast 4]: /images/20220613/522b0fba5bcd47be934e00abdf09f6a9.png
[http_localhost_8080]: http://localhost:8080/
[SouthEast 5]: /images/20220613/ad21fab742794999989445962dc0c725.png