webpack.js 复习笔记

小咪咪 2021-10-01 05:00 277阅读 0赞

1、最简单的命令

hello.js

function hello(str){
      alert(str)
    }

webpack hello.js hello.bundl.js　　//即把hello.js 压缩成 hello.bundle.js

![426690-20170418211951571-1199962979.png][]

2、requrie

hello.js

require('./world.js')
    function hello(str){
      alert(str)
    }

world.js

function world(){
      return {
        
      }
    }

webpack hello.js hello.bundle.js

![426690-20170418212022149-1839088582.png][]

3、require  css

新建style.css

html,body{
        
      margin: 0;
      padding: 0;
    }

hello.js

require('./world.js')
    require('./style.css')
    function hello(str){
      alert(str)
    }

运行 webpack hello.js hello.bundle.js

报错了，因为webpack天生不支持css

![426690-20170418212716118-1707789891.png][]

4、安装css-loader style-loader即可

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

然后运行 webpack hello.js hello.bundle.js 报错：

![426690-20170418213115868-1273838309.png][]

因为没有指定loader

修改hello.js

require('./world.js')
    require('css-loader!./style.css')
    function hello(str){
      alert(str)
    }

再运行 webpack hello.js hello.bundle.js

![426690-20170418213549618-245062846.png][]

运行成功

5、新建index.html

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>webpack</title>
        </head>
        <body>
            <script src="hello.bundle.js" type="text/javascript" charset="utf-8"></script>
        </body>
    </html>

hello.js

require('./world.js')
    require('css-loader!./style.css')
    function hello(str){
      alert(str)
    }
    hello('hello world');

预览即可看到 弹出 hello world  提示框

6、修改css背景色，看看css-loader是否生效

html,body{
        
      margin: 0;
      padding: 0;
    }
    
    body{
        
      background: red;
    }

再运行 webpack hello.js hello.bundle.js

发现背景色没有变红

因为css-loader 需要依赖style-loader

修改，hello.js

require('./world.js')
    require('style-loader!css-loader!./style.css')
    function hello(str){
      alert(str)
    }
    hello('hello world');

运行 webpack hello.js hello.bundle.js 打开index.html就会发现背景色变红了

页面添加了style标签

![426690-20170418215316712-537248375.png][]

7、如果引入每一个css文件都需要写  require('style-loader!css-loader!./\*\*\*\*\*.css')会很麻烦

可以用用webpack 提供的 --module-bind命令来 指定 什么文件用什么loader处理

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

8、--watch 即每次ctrl + s的时候，自动打包

wepack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --watch

9、--progress 可以看到打包过程

10、--display-modules 列出打包过程中所有依赖的模块

11、--display-reasons

转载于:https://www.cnblogs.com/xudy/p/6730465.html

[426690-20170418211951571-1199962979.png]: /images/20210724/d933c951aea24e4fb97f1e57d4115ca5.png
[426690-20170418212022149-1839088582.png]: /images/20210724/bfc91c0f447d42e1862138103069952d.png
[426690-20170418212716118-1707789891.png]: /images/20210724/95d3249d7ebc48d79c136b6597554d46.png
[426690-20170418213115868-1273838309.png]: /images/20210724/3f02bb5c1912403a934a35b75910f4e1.png
[426690-20170418213549618-245062846.png]: /images/20210724/8e12177a0e2c4987985a5a8b603abf6d.png
[426690-20170418215316712-537248375.png]: /images/20210724/a75641effd2a4eaaa6bdde072f568c78.png