《使用webpack-dev-server实现热更新》

目标

建立一个lesson2项目，内容与上一节的lesson1项目一致，当用浏览器访问http://localhost:8080/index.html时，修改任一html、css、js、图片文件，页面都会自动刷新。

挑战

在原项目的基础上，将‘hello world’修改成‘你好 世界’、字体颜色修改成#ccc、并在2秒之后渐隐，浏览器页面http://localhost:8080/index.html会自动刷新，能正确显示页面样式且无报错。

知识点

1、webpack-dev-server及热更新。学习开发模式，并学会使用页面热更新功能。

课程内容

webpack-dev-server很棒的一点就是当修改页面文件时，页面不会整页刷新，而是会热更新，当页面模块很多体积较大时，可以帮我们省下一大把时间。我很看好这一种做法，相信以后这种做法也会成为开发模式的标准。接下来咱们一起在lesson1项目的基础上加入webpack-dev-server。
首先安装npm包

  1. npm install webpack-dev-server --save-dev

编写配置文件

copy以下代码到webpack.config.js

  1. var path = require('path'),
  2. HtmlWebpackPlugin = require('html-webpack-plugin'),
  3. ExtractTextPlugin = require("extract-text-webpack-plugin"),
  4. webpack = require('webpack'); //这里引入webpack是为了使用webpack的热更新功能以及其他自带插件，见 module.exports.plugins
  5. module.exports = {
  6.   entry: [
  7.     // 给webpack-dev-server启动一个本地服务，并连接到8080端口
  8.     'webpack-dev-server/client?http://localhost:8080',
  10.     // 给上面启动的本地服务开启自动刷新功能，'only-dev-server'的'only-'意思是只有当模块允许被热更新之后才有热加载，否则就是整页刷新
  11.     'webpack/hot/only-dev-server',
  13.     // webpack的入口文件，注意这个声明必须写在上面两个后面，webpack-dev-server才有效
  14.     './webpack.entry.js'
  15.   ],
  16.   output: {
  17.     filename: 'webpack.bundle.js',
  18.     path: path.resolve(__dirname, './build'),
  19.     publicPath: ''
  20.   },
  21.   context: __dirname,
  22.   module: {
  23.     rules: [{
  24.       test: /\.css$/,
  25.       use: ExtractTextPlugin.extract({
  26.         fallback: "style-loader",
  27.         use: "css-loader"
  28.       })
  29.     },
  30.     {
  31.       test: /\.(jpg|png)$/,
  32.       use: ['url-loader?limit=10000&name=img/[name].[ext]']
  33.     },
  34.     {
  35.       test: /\.html$/,
  36.       use: ['html-loader']
  37.     }]
  38.   },
  39.   plugins: [
  40.     new HtmlWebpackPlugin({
  41.       template: './src/index.html',
  42.       filename: 'index.html'
  43.     }), 
  44.     new ExtractTextPlugin("style.css"),
  45.     // 开启webpack全局热更新
  46.     new webpack.HotModuleReplacementPlugin(),
  48.     // 当接收到热更新信号时，在浏览器console控制台打印更多可读性高的模块名称等信息
  49.     new webpack.NamedModulesPlugin()
  50.   ],
  52.   // 定义webpack-dev-server
  53.   devServer: {
  54.     contentBase: path.resolve(__dirname, 'src'),
  55.     // 静态文件目录位置，只有当你需要在webpack-dev-server本地服务器查看或引用静态文件时用到。类型：boolean | string | array, 建议使用绝对路径
  56.     hot: true,
  57.     // 模块热更新。依赖于HotModuleReplacementPlugin
  58.     noInfo: false,
  59.     // 在命令行窗口显示打包信息
  60.   }
  61. };

主要修改的地方在于：
1、 require('webpack')
2、在entry属性中插入了两个webpack-dev-server入口
3、给plugins属性增添了webpack自带的HotModuleReplacementPlugin、NamedModulesPlugin两个插件，前者对于热更新是必须的
4、声明了devServer属性

运行npm start命令，浏览器访问http://localhost:8080/index.html，页面显示正常。修改并保存style.css，发现浏览器并没有自动刷新页面，问题来了！
打开浏览器控制台，能看到每次修改保存style.css的时候，webpack-dev-server都能监控到代码变化。
《使用webpack-dev-server实现热更新》 - 图1

问题元凶：extract-text-webpack-plugin

extract-text-webpack-plugin不支持热更新，当使用extract-text-webpack-plugin时样式就没法热加载，这个问题在它的github主页上有提到
《使用webpack-dev-server实现热更新》 - 图2
那为什么浏览器能监听到style.css的变动呢，那是因为咱们在入口文件webpack.entry.js中写入了require('./src/style.css')，webpack会对require的文件保持监听。为了解决问题，咱们尝试一下不用extract-text-webpack-plugin，只用style-loader和css-loader
copy以下代码到webpack.config.js

  1. var path = require('path'),
  2. HtmlWebpackPlugin = require('html-webpack-plugin'),
  3. webpack = require('webpack'); //这里引入webpack是为了使用webpack的热更新功能以及其他自带插件，见 module.exports.plugins
  4. module.exports = {
  5.   entry: [
  6.     // 给webpack-dev-server启动一个本地服务，并连接到8080端口
  7.     'webpack-dev-server/client?http://localhost:8080',
  9.     // 给上面启动的本地服务开启自动刷新功能，'only-dev-server'的'only-'意思是只有当模块允许被热更新之后才有热加载，否则就是整页刷新
  10.     'webpack/hot/only-dev-server',
  12.     // webpack的入口文件，注意这个声明必须写在上面两个后面，webpack-dev-server才有效
  13.     './webpack.entry.js'
  14.   ],
  15.   output: {
  16.     filename: 'webpack.bundle.js',
  17.     path: path.resolve(__dirname, './build'),
  18.     publicPath: ''
  19.   },
  20.   context: __dirname,
  21.   module: {
  22.     rules: [{
  23.       test: /\.css$/,
  24.       use: ['style-loader', 'css-loader?sourceMap']
  25.     },
  26.     {
  27.       test: /\.(jpg|png)$/,
  28.       use: ['url-loader?limit=10000&name=img/[name].[ext]']
  29.     },
  30.     {
  31.       test: /\.html$/,
  32.       use: ['html-loader']
  33.     }]
  34.   },
  35.   plugins: [
  36.     new HtmlWebpackPlugin({
  37.       template: './src/index.html',
  38.       filename: 'index.html'
  39.     }),
  40.     // 开启webpack全局热更新
  41.     new webpack.HotModuleReplacementPlugin(),
  43.     // 当接收到热更新信号时，在浏览器console控制台打印更多可读性高的模块名称等信息
  44.     new webpack.NamedModulesPlugin()
  45.   ],
  47.   // 定义webpack-dev-server
  48.   devServer: {
  49.     contentBase: path.resolve(__dirname, 'src'),
  50.     // 静态文件目录位置，只有当你需要在webpack-dev-server本地服务器查看或引用静态文件时用到。类型：boolean | string | array, 建议使用绝对路径
  51.     hot: true,
  52.     // 模块热更新。依赖于HotModuleReplacementPlugin
  53.     noInfo: false,
  54.     // 在命令行窗口显示打包信息
  55.   }
  56. };

运行npm start命令，再次修改保存style.css，可以看到浏览器页面能够自动刷新了，且每次刷新时都不用刷新整个页面（不信的话可以打开浏览器控制台查看热更新信息，会发现每次页面刷新的时候控制台的信息不会被清零），棒！
诶～问题又来了！！！修改index.html文件时，页面没有自动自动刷新。

问题缘由：index.html没有处于被webpack监听的状态

webpack只会监听被require或import的文件，copy以下代码到webpack.entry.js

  1. require('./src/index.html');
  2. require('./src/style.css');
  3. require('./src/main.js');

重新运行npm start命令，修改保存index.html，页面自动刷新，完美～～～
至此，咱们已经可以随意修改html、css、js、图片等文件并实现页面自动热更新了。
《使用webpack-dev-server实现热更新》 - 图3

devtool

在做样式调整时，比如说要修改项目中图片的大小，在浏览器选中图片，能看到样式都在<head>中的<style>标签中
《使用webpack-dev-server实现热更新》 - 图4
当页面某个部分样式要调整时，由于不知道对应样式的具体位置，会增加修改的时间成本。webpack有个属性能把样式都索引到对应的css文件里面，这个属性就是 devtool，特别当页面很复杂，多个模块引入多个css文件时，devtool能大大提高咱们的调试效率，不止是锦上添花，更是雪中送炭啊～
copy以下代码到webpack.config.js

  1. var path = require('path'),
  2. HtmlWebpackPlugin = require('html-webpack-plugin'),
  3. webpack = require('webpack'); //这里引入webpack是为了使用webpack的热更新功能以及其他自带插件，见 module.exports.plugins
  4. module.exports = {
  5.   entry: [
  6.     // 给webpack-dev-server启动一个本地服务，并连接到8080端口
  7.     'webpack-dev-server/client?http://localhost:8080',
  9.     // 给上面启动的本地服务开启自动刷新功能，'only-dev-server'的'only-'意思是只有当模块允许被热更新之后才有热加载，否则就是整页刷新
  10.     'webpack/hot/only-dev-server',
  12.     // webpack的入口文件，注意这个声明必须写在上面两个后面，webpack-dev-server才有效
  13.     './webpack.entry.js'
  14.   ],
  15.   output: {
  16.     filename: 'webpack.bundle.js',
  17.     path: path.resolve(__dirname, './build'),
  18.     publicPath: ''
  19.   },
  20.   context: __dirname,
  21.   module: {
  22.     rules: [{
  23.       test: /\.css$/,
  24.       use: ['style-loader', 'css-loader?sourceMap' // 这里需要配置sourceMap参数
  25.       ]
  26.     },
  27.     {
  28.       test: /\.(jpg|png)$/,
  29.       use: ['url-loader?limit=10000&name=img/[name].[ext]']
  30.     },
  31.     {
  32.       test: /\.html$/,
  33.       use: ['html-loader']
  34.     }]
  35.   },
  36.   plugins: [
  37.     new HtmlWebpackPlugin({
  38.       template: './src/index.html',
  39.       filename: 'index.html'
  40.     }),
  41.     // 开启webpack全局热更新
  42.     new webpack.HotModuleReplacementPlugin(),
  44.     // 当接收到热更新信号时，在浏览器console控制台打印更多可读性高的模块名称等信息
  45.     new webpack.NamedModulesPlugin()
  46.   ],
  48.   // 定义webpack-dev-server
  49.   devServer: {
  50.     contentBase: path.resolve(__dirname, 'src'),
  51.     // 静态文件目录位置，只有当你需要在webpack-dev-server本地服务器查看或引用静态文件时用到。类型：boolean | string | array, 建议使用绝对路径
  52.     hot: true,
  53.     // 模块热更新。依赖于HotModuleReplacementPlugin
  54.     noInfo: false,
  55.     // 在命令行窗口显示打包信息
  56.   },
  58.   // 开启devtool：开发阶段特别有用，比如说用sass开发，在浏览器查看样式时可以方便知道该样式是映射到sass具体的第几行
  59.   devtool: 'source-map'
  60. };

修改的地方有两个：
1、配置了devtool属性
2、在module属性 —> rules —> css-loader 添加了sourceMap参数
重新运行npm start命令，能看到样式映射的目标已经达到了
《使用webpack-dev-server实现热更新》 - 图5

补充

devtool属性值还有其他选项可供选择，差别表现在打包耗时、sourceMap精确度等，详见：https://webpack.js.org/configuration/devtool/ ，根据实际项目情况来判断使用哪个选项值。

总结

以上虽然解决了开发时热更新的问题，但在开发阶段结束要对文件进行打包时，理论上会出现两个不足之处：
1、在lesson1有提到，不使用extract-text-webpack-plugin时style.css会被打包进webpack.bundle.js里面；
2、在入口文件require('index.html')会导致webpack打包时把index.html打包到 webpack.bundle.js 中，而咱们已经使用 html-webpack-plugin 以 index.html 为模版生成了html文件，这样会造成资源重复。
咱们来试试，运行npm run build命令，打包完成之后目录结构如下：
《使用webpack-dev-server实现热更新》 - 图6
会发现没有style.css生成，搜索webpack.bundle.js，能看到style.css和index.html的代码
《使用webpack-dev-server实现热更新》 - 图7
《使用webpack-dev-server实现热更新》 - 图8
3、打包后的webpack.bundle.js文件非常大，近700kb，就算是1、2点中提到的把index.html和style.css一起打包进去，也不可能这么大
《使用webpack-dev-server实现热更新》 - 图9
本地打开index.html，看到控制台有报错信息
《使用webpack-dev-server实现热更新》 - 图10
报错信息看起来很熟悉，跟开发时热更新的提示信息是类似的， 在webpack.bundle.js中检索webpack-dev-server，能看到对应打包后的代码
《使用webpack-dev-server实现热更新》 - 图11
这几个问题咱们一起在下一节lesson3解决。