webpack优化环境配置 -- 进阶篇知识要点汇总

1、HMR

• css样式只需要在devServer 里面 hot 配置为true即可
• js文件需要在js文件里面加配置才可以实现，要不然是整个页面刷新
  注意： 只适用于非入口文件js

if (module.hot) {
   
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
   
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    doSomething();
  });
}

• html文件不需要，若特殊场景需要的话，可以写到entry的配置里面去，如下：

entry: ['./src/js/index.js', './src/index.html']

2、source-map

一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
开发环境：速度快，调试更友好。

开发环境：速度快，调试更友好
速度快(eval>inline>cheap>…)
eval-cheap-souce-map
eval-source-map
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map

开发模式推荐配置：
eval-source-map / eval-cheap-module-souce-map

生产环境：源代码要不要隐藏? 调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

生产环境推荐配置：
source-map / cheap-module-souce-map

3、oneOf

rules里面的多个loader可以用oneOf包起来，这样可以使文件只被其中一个loader匹配处理，提升打包的速度和效率。个别需要多个loader处理的，可以放到oneOf外面，并指定 ** enforce: ‘pre’（优先执行） ** 来达到效果。

module: {
   
    rules: [
      {
   
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
   
          fix: true
        }
      },
      {
   
        // 以下loader只会匹配一个
        // 注意：不能有两个配置处理同一种类型文件
        oneOf: [
          {
   
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
   
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
              先执行eslint 在执行babel
          */
          {
   
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
   
              presets: [
                [
                  '@babel/preset-env',
                  {
   
                    useBuiltIns: 'usage',
                    corejs: {
   version: 3},
                    targets: {
   
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
   
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
   
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
   
            test: /\.html$/,
            loader: 'html-loader'
          },