webpack安装教程及命令行

实例一：

1.建立目录

mkdir webpackDemo

2.初始化cnpm

cnpm install

3.安装webpack

cnpm install webpack --save-dev

4.新建hello.js文件，

function hello(str){
    alert(str);
}

用webpack打包hello.js文件

webpack hello.js hello.bundle.js

这段代码意思是用webpack打包hello.js文件，打包后生成的文件为hello.bundle.js

Hash: 3fef7a52586c888c12b3
Version: webpack 3.8.1
Time: 55ms
          Asset     Size  Chunks             Chunk Names
hello.bundle.js  2.51 kB       0    main
   [0] ./hello.js 40 bytes {0} [built]

哈希值

Hash: 3fef7a52586c888c12b3

打包花费时间

Time: 55ms

webpack版本

Version: webpack 3.8.1

打包生成文件为hello.bundle.js，文件大小为2.51kB，分块为0，分块名称为main

  Asset     Size  Chunks             Chunk Names
hello.bundle.js  2.51 kB       0    main
   [0] ./hello.js 40 bytes {0} [built]

实例二：
1.新建world.js文件

function world(){
    return{

    }
}

2.hello.js引用world.js

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

3.打包

webpack hello.js hello.bundle.js

有2个模块，hello.js模块(编号为0),world.js模块(编号为1)

        Asset     Size  Chunks             Chunk Names
hello.bundle.js  2.66 kB       0    main
   [0] ./hello.js 63 bytes {0} [built]
   [1] ./world.js 50 bytes {0} [built]

实例三：webpack打包css文件
1.新建style.css

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

2.hello.js引入style.css

require('./world.js')
require('./style.css');

function hello(str){
    alert(str);
}

3.打包

webpack hello.js hello.bundle.js

结果报错！

You may need an appropriate loader to handle this file type.

原来我们需要安装loader，安装css-loader，style-loader

cnpm install css-loader style-loader --save-dev

再次打包hello.js
结果还是报错！

You may need an appropriate loader to handle this file type.

肿么办？我们可以在hello.js中指定css-loader、style-loader

require('./world.js')
require('style-loader!css-loader!./style.css');

function hello(str){
    alert(str);
}

hello('hello world!');

再打包！
打包终于成功，有4个分块

        Asset     Size  Chunks             Chunk Names
hello.bundle.js  18.9 kB       0    main
   [0] ./hello.js 140 bytes {0} [built]
   [1] ./world.js 50 bytes {0} [built]
   [2] ./node_modules/_style-loader@0.19.0@style-loader!./node_modules/_css-loade
r@0.28.7@css-loader!./style.css 1.08 kB {0} [built]
   [3] ./node_modules/_css-loader@0.28.7@css-loader!./style.css 271 bytes {0} [bu
ilt]
    + 3 hidden modules

实例四：
新建index.html文件，引入上述打包后的hello.bundle.js文件即可

效果如图：

用开发者工具查看代码如下：

这就很好的阐述了2个loader,css-loader使得webpack可以处理.css文件,style-loader通过css-loader处理完的文件，新建一个style标签，插入到html里面，如上截图所示。

实例六：每次指定loader是一件很麻烦的事情

require('style-loader!css-loader!./style.css');

其实我们可以这样写

require('./style.css');

然后命令行需要这样写
绑定模块，

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

实例七：
每次在命令行输入

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

打包命令也是一件麻烦的事情，其实我们可以这样来处理，进行侦听，这样的话，我们就不需要每次都输入打包命令了。

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

实例八：查看打包进度

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

命令行输出结果：
Hash: 5389ff5416ec779e3cd6
Version: webpack 3.8.1
Time: 427ms
Asset Size Chunks Chunk Names
hello.bundle.js 18.9 kB 0 main
[0] ./hello.js 126 bytes {0} [built]
[1] ./world.js 50 bytes {0} [built]
[2] ./style.css 1.08 kB {0} [built]
[3] ./node_modules/_css-loader@0.28.7@css-loader!./style.css 271 bytes {0} [built]
+ 3 hidden modules

查看打包进度和列出所有模块

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

命令行输出结果：
Hash: 5389ff5416ec779e3cd6
Version: webpack 3.8.1
Time: 461ms
Asset Size Chunks Chunk Names
hello.bundle.js 18.9 kB 0 main
[0] ./hello.js 126 bytes {0} [built]
[1] ./world.js 50 bytes {0} [built]
[2] ./style.css 1.08 kB {0} [built]
[3] ./node_modules/_css-loader@0.28.7@css-loader!./style.css 271 bytes {0} [built]
[4] ./node_modules/_css-loader@0.28.7@css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./node_modules/_style-loader@0.19.0@style-loader/lib/addStyles.js 9.41 kB {0} [built]
[6] ./node_modules/_style-loader@0.19.0@style-loader/lib/urls.js 3.01 kB {0} [built]

打包原因：

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-module
s --display-reasons