webpack4.0 watch

1.打包多页应用

多个entry打包多个页面为例

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    other: './src/other.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index', 'other']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'other.html',
      chunks: ['other']
    })
  ]
}

首先output的filename中，用变量name打包不同的js，创建各自依赖关系。然后插件“html-webpack-plugin插件的参数中，字段chunks指定打包后的html文件该引用哪个JS文件”

2.配置sourceMap

生产环境中生成的代码已经被压缩，报错后很难定位。webpack支持sourceMap（源码映射），可以很方便的解决此类烦恼。代码如下：

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
//你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。
  devtool: 'source-map',  // 会多生成一个.map文件，因此打包和构建速度可能会略慢。常见的还有‘eval-source-map’，调试时与source-map方式基本没区别，只是不会生成.map文件。还有多种sourceMap方式，具体用法自行测试
  module: {
    rules: [
    ...
 ...
}

4.watch的用法

watch提供了和webpack-dev-server中的“hot”字段类似的功能，只是它是实时打包，"hot"是实时刷新。watch还有自己的配置项(和watch同级，字段名为watchOption)。

  output: {
    ...
  },
  devServer: {
    ...
  },
  watch: true,
  watchOptions: {
    poll: 1000,  // 每秒查询1000次
    aggreatement: 500, // 防抖，节流
    ignored: /node_modules/  //不需要监控的文件
  },