webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
1、初始化npm
npm init（因为是练习的项目，一路回车默认即可，最终会生成package.json）
2、安装webpack
npm install webpack --save-dev（使用cnpm install webpack --save-dev淘宝NPM镜像更快速）
3、根目录下新建src（存放代码源文件）、dist（存放打包后的静态文件）文件夹
4、在src目录下新建test.js，随便写点测试内容，并且执行打包命令：
webpack src/test.js dist/test.bundle.js
该命令运行结果：
Hash: 6fab0e1117450e4c4608
Version: webpack 2.6.1
Time: 74ms
Asset Size Chunks Chunk Names
test.bundle.js 2.68 kB 0 [emitted] main
[0] ./src/test.js 43 bytes {0} [built]
5、这样我们就初步完成了一个小打包，接下来在src下新建个style.css，在test.js文件使用引入style.ccc
test.js文件：
require('./style.css');
console.log('test');
style.css文件：
随便写点css样式
h1 {
color: blue;
}
再次执行打包命令：
webpack src/test.js dist/test.bundle.js
报错：
ERROR in ./src/style.css
Module parse failed: E:\php1\wamp64\www\learn\v1\src\style.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
这是因为webpack本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。若想支持.css类型，需要依赖css-loader，用于在js中加载css，运行下面命令进行安装：
cnpm install css-loader --save-dev
然后再引入css文件那，前面加上css-loader!，如下：
require('css-loader!./style.css');
再次执行打包命令：
webpack src/test.js dist/test.bundle.js
恭喜你，打包成功
6、接下来在根目录下新建index.html，引入test.bundle.js，部分代码如下：
<body>
<h1>我是首页</h1>
<script src="./dist/test.bundle.js"></script>
</body>
然后浏览器打开index.html，你会发现js代码执行了，但是css样式却没变化，这是因为要使css生效，还需要安装style-loader，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
cnpm install style-loader --save-dev
接下来在引入css前面，加上style-loader!
require('style-loader!css-loader!./style.css');
再次执行打包命令：
webpack src/test.js dist/test.bundle.js
刷新index.html页面，你会惊喜地发现css也生效了~
7、require CSS 文件的时候都要写 loader 前缀 style-loader!css-loader!，当然，如果你不想每个css文件前面都加上这个前缀，可以通过以下操作设置：
第一步将require('style-loader!css-loader!./style.css');前面的style-loader!css-loader!去掉
require('./style.css');
第二步运行以下命令
webpack src/test.js dist/test.bundle.js --module-bind 'css=style-loader!css-loader'
注意：如果没有第一步，直接执行第二步会报以下错误，因为第一步加载css已经是指定用loader来处理.css，所以在使用webpack指令时没必要再指定loader
ERROR in ./~/_css-loader@1.0.0@css-loader!./~/_style-loader@0.23.0@style-loader!./~/
_css-loader@1.0.0@css-loader!./src/style.css
Module build failed: Unknown word (2:1)
8、每次修改文件都要执行一次打包命令，为了达到自动打包的目的，可执行以下命令：
webpack src/test.js dist/test.bundle.js --module-bind 'css=style-loader!css-loader' --watch
随便修改以下文件内容，然后刷新index.html页面，页面内容已经发生变化
加我微信公众号【皮蛋馅儿】，一起学习哦~
