2021-8-25 Webpack

2021-8-25 Webpack

Webpack的优化配置

开发环境性能优化

生产环境性能优化

开发环境性能优化

优化打包构建速度

优化代码调试

生产环境性能优化

优化打包构建速度

优化代码性能

HMR

hot module replacement 热模块替换、模块热替换

作用：一个模块发生改变，只会重新打包这一个模块（而不是打包所有模块）

极大提升构建速度

样式文件：可以使用HMR功能：因为style-loader内部实现了

js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码

注意：HMR功能对js的处理，只能处理非入口js文件的其他文件

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了

解决：修改entry入口，将html文件引入

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

webpack.config.js

devServer: {
  contentBase: path.resolve(__dirname,'build'),
  compress:true,
  port:3000,
  open:true,
  //开启HMR功能
  //当修改了webpack配置，新配置要想生效，必须重启webpack服务
  hot:true
}

index.js

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

source-map：一种 提供源代码到构建后代码映射 技术（如果构建后代码出错了，通过映射可以追踪源代码错误）
[inline-|hidden-|eval-] [nosources-][cheap-[module-]]source-map

source-map：外部
错误代码准确信息 和 源代码的错误位置

inline-source-map：内联
只生成一个内联source-map
错误代码准确信息 和 源代码的错误位置

hidden-source-map：外部
错误代码错误原因，但是没有错误位置
不能追踪源代码错误，只能提示到构建后代码的错误位置

eval-source-map：内联
每一个文件都生成对应的source-map，都在eval
错误代码准确信息 和 源代码的错误位置

nosources-source-map:外部
错误代码准确信息，但是没有任何源代码信息

cheap-source-map：外部
错误代码准确信息 和 源代码的错误位置
只能精确到行

cheap-module-source-map：外部
错误代码准确信息 和 源代码的错误位置

module会将loader的source map加入

内联 和 外联的区别：1.外部生成了文件，内联没有 2.内联构建速度更快

开发环境：速度快，调试更友好

速度快（eval>inline>cheap>…）

eval-cheap-source-map

eval-source-map

调试更友好

source-map

cheap-module-source-map

cheap-source-map

生产环境：源代码要不要隐藏？调试要不要更友好

内联会让代码体积变大，所以在生产环境不用内联

nosource-source-map 全部隐藏

hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

–> source-map/cheap-module-source-map

Oneof

以下loader只会匹配一个
注意：不能有两个配置处理同一种类型文件

rules: [
      /*
      * 正常来讲，一个文件只能被一个loader处理。
      * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
      * 先执行eslint 在执行babel
      * */
      {
        //在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']
          },

          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: {version: 3},
                  target: {
                    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'
          },
          {
            exclude: /\.(js|css|less|html|jpg|png|gif)$/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]

缓存

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: {version: 3},
        target: {
          chrome: '60',
          firefox: '50'
        }
      }
    ],
    //开启babel缓存
    //第二次构建时，会读取之前的缓存
    cacheDirectory:true
  }
},

babel缓存

cacheDirectory:true

文件资源缓存

hash:每次webpack构建时会生成一个唯一的hash值

问题：因为js和css同时使用一个hash值

如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样

问题：js和css的hash值还是一样的？

因为css是在js中被引入的，所以同属于一个chunk

contenthash：根据文件的内容生成hash值，不同文件hash值不一样

开启babel缓存

第二次构建时，会读取之前的缓存