1、先准备一个 demo，接下来会逐步加深
1）创建项目文件，注意名字不要起为 webpack；
包含两个模块，前台展示 customer，后台管理 admin；
每个模块都包含 index.html 、index.js
2）使用命令行进入项目文件夹
初始化项目 ：npm init
安装依赖：cnpm i webpack-dev-server
3）编辑webpack配置文件，webpack.config.js
4）输入命令 webpack --process --colors，或者输入命令 webpack ，打包完成，可以看见dist文件夹
5）输入命令 cnpm i -D webpack (可忽略，因为我的操作报错 cannot find module 'webpack')
6）修改package.json中的 "scripts":{"start":"webpack-dev-server --progress --colors"}
6）启动项目：npm start
项目代码包下载 接下来所有代码都是在此基础之上做修改
2、页面可以自动刷新
1）编辑 package.json，添加参数 --inline 在"scripts":{"start":"webpack-dev-server --progress --colors --inline"}里
2）重启 npm start 查看效果
3、使用 plugin
webpack 中的另一个非常重要的功能是 Plugins(插件)，是用来扩展webpack功能的，它们会在整个构建过程中生效，执行相关的任务
Loaders 和 Plugins 常常会被弄混，但是他们其实是完全不同的东西
Loaders 是在打包构建过程中用来处理源文件的(JSX、Scss、Less...)，一次处理一个
Plugins 并不好自己操作单个文件，他直接对整个构建过程起作用
1）配置 Plugin
打开 webpack.config.js，编辑成如图所示：
然后输入命令 webpack，如果报错：cannnot find module 'webpack'，请输入：cnpm i -D webpack
查看 dist 文件夹中的两个 js 文件已经被压缩
4、使用 Loader
1）css-loader 与 style-loader
输入命令：cnpm install --save-dev style-loader css-loader
2）编写一个 css 文件
3） js 中引入 css 文件 require('./index.css')
4）编辑 webpack.config.js 如图：
5）输入命令 npm start，此时我的项目报错 Unexpected token：name （urlParts） [admin.bundle.js:317,4]
知道原因是因为 webpack1 与 webpack2 编译方式不同，但是并未解决，请指教！！
所以只能先删掉 webpack.config.js 中的 plugins 部分
6）file-loader与 url-loader
输入命令：cnpm install --save-dev file-loader url-loader
编写 css,添加图片
编写 webpack.config.js 如图：
启动项目：npm start
7）sass-loader 与 node-sass
输入命令 npm install --save-dev sass-loader
因为 sass-loader 依赖于 node-sass，所以还要安装 node-sass
输入命令 npm install --save-dev node-sass
新建scss文件，同时在 js 中引入
修改 webpack.config.js ，如图：
输入命令 npm start，启动项目
8） babel-loader
对 js 文件预处理，可以使用 es6 语法
输入命令 npm install --save-dev babel-loader babel-core
修改 js 文件为 es6 写法
编辑 webpack.config.js，如图：
9）减少打包时间
可使用 noParse:[/文件名/] //不去遍历某个文件
可使用 include:/(文件名|文件名)/ //缩小loader处理文件的数量，增加打包速度，如图：
5、react 项目使用 webpack 打包