Webpack学习笔记(五)：开发环境和模块热替换

目的

设置开发环境，使得开发体验变得轻松

代码继承自Webpack学习笔记(四)：管理资源，需要将mode设置为 ’development‘模式

使用source Maps

简单说，source Maps是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。

使用source Maps的方式很简单，只需要在config里面指定devtool为要使用的哪种选项的source Maps即可

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
      
    devtool: 'inline-source-map', // 这里指定了inline-source-map
    
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

这时候，如果代码在运行时候发生错误，浏览器就会把出错的的准确位置显示出来，方便查找问题

开发工具(devServer)

选择开发工具的目的是为了在每次修改代码后，不用再手动运行npm命令，可选择的开发工具有

1. webpack watch mode (webpack观察模式)

2. webpack-dev-server

3. webpack-dev-middleware

watch mode

通过webpack --watch命令指示webpack文件更改后重新编译代码，这样在运行webpack后不会退出命令行，而是继续监控所有文件。
这样做的缺点是，修改了文件后还需要手动刷新浏览器才能获得最新的修改效果

webpack-dev-server

webpack-dev-server 提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。设置如下：
安装依赖

npm install --save-dev webpack-dev-server

在webpack.config.js中进行配置

    // ...
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist' // 这个配置告诉webpack-dev-server 将dist目录下的文件作为服务器可访问的文件放到localhost:8080下，这里8080端口是默认端口
    },
    // ...

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。如果希望在其他不同路径中找到 bundle 文件，则可以通过 dev server 配置中的 publicPath 选项进行修改。

webpack-dev-middleware

webpack-dev-middleware 是一个封装器(wrapper)，它可以把 webpack 处理过的文件发送到一个 server。 webpack-dev-server 在内部使用了它，然而它也可以作为一个单独的 package 来使用。

安装 express 和 webpack-dev-middleware：

npm install --save-dev express webpack-dev-middlewar

配置publicPath，确保文件能够在目标路径下被访问得到

   //...
   output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/'
   }

新建一个server.js 文件并使用node sever.js命令启动服务

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// 告诉 express 使用 webpack-dev-middleware，
// 以及将 webpack.config.js 配置文件作为基础配置
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// 将文件 serve 到 port 3000。
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

模块热替换(hot module replacement, HMR)

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。

HMR 不适用于生产环境，它必须只能用于开发环境。

在webpack.config.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'
       app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: '模块热替换'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

参考链接

1. sourceMap
2. sourceMap选项
3. webpack开发环境
4. 代码地址