系列：
webpack入门——了解及使用
webpack进阶——缓存与独立打包
文件目录：
-- /node_modules：依赖的各种模块
-- /src
– index.js
– print.js
– style.css
– package.json：配置npm相关设置
– webpack.config.js：配置webpack
package.json脚本（输入npm run xxx，xxx为脚本中对应命令，将会在命令行中执行相应操作）:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", // webpack打包
"watch": "webpack --watch", // webpack监听模式
"start": "webpack-dev-server --open" // 自动刷新
}
webpack.config.js:
（这是一个我们已经配置好的webpack配置js，本文中的讲解都将基于该文件，会在本文件上多多少少做一些改变以供测试。）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'inline-source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
HtmlWebpackPlugin
由webpack.config.js可知，webpack打包后生成的是若干个js文件，但是最终这些js文件都是应用在html中的。
假如打包后的文件只有app.js，那么完全可以手动创建一个html，并加入<script type="text/javascript" src="app.js">，html就可以应用该打包后的文件。
但是如果我们打包的文件不止一个，或者打包后的文件包含hash值，那么每次我们都需要添加script或者说每次都需要更改文件的hash值吗？当然可以，但是这样很麻烦，开发效率很低。
所以我们就引入了HtmlWebpackPlugin插件，这样就可以自动生成html模版并且自动添加script。
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ // 已添加该插件
title: 'Output Management'
})
]
现在我们进行wepack打包：
生成目录：
-- /dist
– app.js
– common.js
– print.js
– index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="common.js"></script><script type="text/javascript" src="app.js"></script><script type="text/javascript" src="print.js"></script></body>
</html>
更多配置：HTML Webpack Plugin
CleanWebpackPlugin
该插件的主要作用是清除前次打包文件。
没有hash时，这个插件体现不出来效果，我我们在以上的webpack配置中做点小的变动：
// 给输出文件名上加上hash
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
// 注释掉CleanWebpackPlugin
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
// new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
然后再次打包，可以看见dist文件夹中：
现在我们只需要hash后的文件给html使用，但是这里却任然保留着很多上一次打包留下来的东西。
这个时候我们把CleanWebpackPlugin取注释，然后再次打包。
可以看见上次文件夹里的垃圾都没有了，只留下了现在需要的文件。
故CleanWebpackPlugin的效果是在打包前，删除指定的曾经打包的文件夹，然再新建并把最新打包好的内容放在dist文件夹里。
参数为文件夹字符串数组，更多配置：Clean Webpack Plugin
webpack-dev-server
webpack有一个功能叫做监听，使用方法：命令行中输入 webpack --watch。
这样启动webpack之后，每当我们在源文件中发生了改变，都会进行重新打包，这样提高了生产效率，虽然重新打包了，但是我们必须刷新页面才能看见更变。
这样是不友好的，如果能够自己刷新页面那就极好了，这也就是webpack-dev-server的作用，启动一个小型server达到实时刷新的效果。
使用方法：
sudo npm install webpack-dev-server --save-dev
## 然后启动的时候，就
webpack-dev-server --open
## 运行参数可以用以下查看
webpack-dev-server -help
## 常用的有 编译刷新的时候出现颜色和进程条
webpack-dev-server --progress --colors
我们将该脚本写入了package.json中，可以快捷启动 npm run start。
Hot Module Replace
热替换常常和webpack-dev-server同时使用，所谓热替换（HMR: Hot Module Replace）描述的是运行中的一个系统，我要更换其中部分内容，而仍然要保持不替换的内容继续工作，并在替换后，替换部分能够立即生效。
可能到这里大家还不是很明白热替换的具体作用，简单来说就是部分刷新。
假如我们仅仅只使用webpack-dev-server，然后在index.js 引入了 style.css。 那么我们修改一下style.css的样式，webpack-dev-server会监听到源文件发生了变化，然后重新进行webpack打包，然后再刷新页面，可能到这里已经满足了很多人的需求。但是我现在有了一个新的需求，我页面上有一个input，我在input中输入了一系列文字，现在我希望，我更改了样式，input中的文字仍然保持不变，只有修改的样式发生改变。我们知道webpack-dev-server在源文件发生改变后，会刷新整个页面，一旦刷新的整个页面，那么input中的文字必当消失。 这个时候就是体现热替换强大功能的时候了，使用了热替换，就可以仅仅只更改样式而保持input中的值不发生改变。
使用方法：
- 在命令行中直接使用：
webpack-dev-server --hot
- 将启动配置写入webpack.config.js中，首先在插件数组中添加该插件：
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(), // 在实例webpack.config.js中已添加
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
这之后我们将进行webpack-dev-server的配置，
devServer: {
hot: true, // hot为true则代表启动了热替换服务
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
进行配置之后，我们直接启动npm run start脚本既可（webpack-dev-server --open）。
由本例我们知道了devServer是关于webpack-dev-server的配置，我们来看看常用参数：
- port：8080（Number，访问端口），从localhost:8080访问服务器
- hot：是否开启热替换模式
- contentBase：简单来说就是提供静态资源文件的目录，如果我们没有使用HtmlWebpackPlugin的，而是手动的添加了index.html，那么这个时候index.html在哪个目录下，contentBase就需要写哪个目录。这里一定要写绝对路径。因为这个路径是基于本机的，如果写相对路径则是相对于本机的根路径的。
- publicPath：开发模式中，打包的文件在该目录下，而不是在output中制定的文件夹下。并且路径是相对于当前目录的，以'/'开头。例如：publicPath: '/public/'，则应该通localhost:8080/public/来访问打包的文件，例如我要访问common.js，那么就是localhost:8080/public/common.js。使用该路径时，通常都不会自己手写index.html，这样会造成访问混乱，直接使用HtmlWebpackPlugin生成HTML。
更多配置：Webpack Dev Server
source map
首先我们先在本例的webpack配置上做出一些修改：
// devtool: 'inline-source-map' // 注释掉source-map
之后我们运行npm run start，这个时候我们的项目应该正常进入了开发模式中。进入print.js文件：
import _ from 'lodash';
export default function printMe() {
console.log(_.join(['qq', 'bb'], ' '));
}
这个时候我们把console改成consol然后保存，在页面上触发这个printMe函数，发现控制台上：
我们知道错误明明出现在print.js中，但是由于是app.js引用了print.js，所以报错还是在app.js上，这样以后我们出现了错误很难定位出错的位置，导致难以调试，现在我们吧
// devtool: 'inline-source-map'解注，然后重新执行npm run start。再次触发printMe这个函数：
然后我们可以看见，清楚的定位了出错的是在print.js第四行，这就是source map的作用，用于错误定位。但是在生产环境中，我们一般都是经过调试好的文件，所以在生产环境中不需要这个source map。
相关信息查看：开发辅助调试工具(Devtool)
参考资料：
开发中 Server
Webpack dev server
webpack-dev-server 使用总结
Webpack使用教程三（webpack-dev-server）
本文将持续更新。。。。
