1.webpack的概念。
Webpack 是当下最热门的前端资源模块化管理和打包工具。任何形式的资源都可以视作模块，通过 loader 的转换。
2.webpakc的安装。
（1）在Node.js 用npm 全局安装Webpack： npm install webpack -g
通过webpack -h 测试。
（2）进入项目目录。通过npm init创建 package.json。安装webpack依赖 npm install webpack --save-dev。
使用命令webpack + xx（需要打包的js名称） + xx（打包后的js名称）。使用动态表达式require绑定js文件，加载依赖。
（3）打包css ，首先需要先安装loader ： npm install css-loader style-loader --save-dev
1.特别注意如果引用css的时候，打包需要在路径中添加css-loader！，在运用到页面中需要添加style-loader！。
2.使用webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'语句就不需要在路径中引用那些loader了，在后面添加--watch进入监视者模式，--progress 可以看到打包过程，--display-modules 列出打包的模块，--display-reasons 列出打包的原因。
3.webpack的配置文件。
（1）简历项目webpack来配置文件。首先创建目录。
src里面还分别创建script、style文件。来放置js文件跟css文件。
dist 存放打包好的js文件。
（2）系统会默认搜索webpack.config.js这个配置文件， 或者使用 webpack --config +xx（配置文件名）来指定配置文件。
//模块化输出
module.exports = {
//打包入口
entry: './src/script/main.js',
output: {
//打包文件放在哪里
path: './dist/js',
//打包文件名
filename: 'bundle.js'
}
}
在有配置文件的状态下，只需要运行 webpack就能编译打包。
（3）如果需要加特别的参数来输出，需要在package.json文件里面配置。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//可以在这里添加你想要输出的命令。
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
使用 npm run webpack 编译。
（4）配置参数的详解
1.entry 表示入口文件的路径。它有三种写法针对不同的情况。
1.只写一个单一的路径：entry： ‘./路径/.xxx.js’’
2.写一个数组： entry：【‘./路径/.xxx.js’，‘./路径/.xxx.js’’】（这个也只打包了一个文件）
3.可以写 一个对象key 加 value的形式：注意这种写法需要修改 output.filename值才有效果。
entry: {
page1: './page1',
page2: ['./page2','./page3'] }
2.output.filename 这里不要写绝对路径且不要写路径，只需要写文件名。
（1）如果entry入口文件有第三种情况的写法，需要更改filename的文件名。
（2）name 输出跟入口文件同样的文件名。
（3）hash 就是本次编译打包的hash值。（两个hash值是一样的）
（4）chunkhash 是系统的hash值，也可以理解为版本号，只有当文件修改了再打包的文件才会更新这个值。
3.插件。（更新html，因为每次打包好的js文件名是不一定的，所以html引用的js的名字不确定，所以需要插件来解决这个问题。）
1.先案例一个插件推荐网站。插件推荐（随便百度的）（1）先使用命令安装插件 npm install html-webpack-plugin --save-dev.
（2）在配置文件中引用：var htmlWebpackPlugin = require（‘html-webpack-plugin’）。
（3）在配置文件中添加一个属性：
plugins: [
new htmlWebpackPlugin({
//如果不加参数只是生成一个新的html文件。
//设置模版
template: 'index.html',
//更改html的名字，跟更改打包文件名相同。
filename: 'index-[hash].html',
//还可以制定生成的脚本放在那个地方
inject: 'head'
})
]
context：上下文选项用来决定根目录（既绝对路径）的入口文件。
（4）更复杂的功能。把plugins里添加的属性显示到html文件中。
在html文件中写类似js模版语言，需要用<%= %>的格式包裹起来。如果是编写js代码的话就不需要中间的= 号。
搜索到一个每一个属性详细的配置，需要的可以过来看看html-webpack-plugin 1.既然能用代码的形式拿到数据，知道了结构，那么换一种方式就可以用模版语言的方式引用js文件。
在html标签里面要用 <%= htmlWebpackPlugin.options.xx(这里写属性) %> 另外，需要打印属性跟值的时候加上JSON.stringify解析成字符串。
2.在output.publicPath：这里可以写上线的地址前缀。
3.多应用的页面处理。
（1）在entry添加多个入口文件。
（2）新建相同个数的new htmlWebpackPlugin，设置不同的文件。
（3）为了解决生成的html载入对应的js文件，可以使用两种方法：
1.使用chunks浏览器传参的方式：chunks：【‘a’】。
2.使用excludeChunks排除串口的方式：excludeChunks：【‘b’，‘c’】。
（4）减少http请求，把js初始化代码直接写到页面中。
1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)获取的值没有publicPath值。
标签。excludeChunks排除串口在 模块生成也能能起到一个筛选的作用。
2.拿到这个值之后使用webpack官方给的api compilation.assets[包裹获取的值].source() 这样就获取的不是地址，而是js内容了。
3.使用模版语言判断引用js。
4.特别注意inject是开启是否自动生成