代码分离

多入口entry
optimization.splitChunks.chunks = 'all'
import().then

prefetch

魔法字符串：import(/* webpackPrefetch: true */)

preload

魔法字符串：import(/* webpackPreload: true */) 注意：preload link必须设置as属性来声明资源的类型（font/image/style/script等)，否则浏览器可能无法正确加载资源。

更新缓存

output.filename: '[name].[contenthash].js'

公共路径

output.pulic = 'http://localhost:3000'

webpack-merge

module.exports = (env) => {
  switch (true) {
    case env.development:
      return merge(common, dev);
    case env.production:
      return merge(common, prod);
    default:
      return new Error('cant no match env config')
  }
};

压缩

terser-webpack-plugin webpack5自带压缩js，如果配置了minimizer需要手动写上。
css-minimizer-webpack-plugin 压缩css

devtool

eval：每个module会封装到eval里包裹起来执行，并且会在末位追加注释//@sourceURL，能追踪代码
source-map：生成一个SourceMap文件，能追踪代码
hidden-source：和source-map一样，但不会在bundle末尾追加注释，不能追踪代码
inline-source-map：生成一个DataUrl形式的SourceMap文件，嵌套在bundle里面，增加了打包文件大小，能追踪代码
eval-source-map：每个module会通过eval()来执行，并生成一个DataUrl形式的SourceMap添加到eval函数最后，能追踪代码。
cheap-source-map：生成一个没有列信息的SourceMap文件，不包含loader的sourceMap，比如babel的sourcemap，所以通过babel编译的代码无法追踪到原始代码位置
cheap-module-source-map：生成一个没有列信息的SourceMap文件，包含loader的sourceMap，能追踪代码。

webpack分析bundle图

yarn add webpack-bundle-analyzer -D

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

postcss兼容低版浏览器css演示

yarn add postcss-loader -D

//package.json
{
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

css module

{
    loader: 'css-loader',
    options: [
        modules: true,
    ],
}

webpack部分草稿