webpack5的踩坑记

---

前言

提示：升级webpack5之后的奇奇怪怪的问题

一、webpack-dev-server启动失败？

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
原因：从 wepack4.x/webpack-cli 3.x 的搭配升级到了 webpack5.x/webpack-cli 4.x
4/3启动命令为：‘webpack-dev-server’
5/4版本webapck-cli目录做了修改，因此会报错，启动命令修改为‘webpack serve’ 即可

二、与 browserslist 冲突导致热更新失效

webpack-dev-server内部配了websocket， 可启动后浏览器并未见websocket服务，因此也未有热更新效果。

原因：在 package.json 里面写了 browserslist，与 browserslist 冲突导致热更新失效

方法一、删除 package.json 里的 browserslist（如果package.json 里面写了 browserslist）
方法二、在 webpack 配置中设置 target 字段，来在开发阶段使得 browserslist 失效（如果package.json 里面写了 browserslist）：

webpack.config.js

module.exports = {
  target: process.env.NODE_ENV === "development" ? "web" : "browserslist", // 添加这一句
};

方法三、在 webpack 配置中直接设置
在 webpack 配置中直接设置：

module.exports = {
  target: "web", // 添加这一句
};

三、output.clean

5.20.0+
5.20以下版本清除dist文件内容一般使用插件 clean-webpack-plugin， 5.20版本以后output新增特性clean，用于清除dist文件

module.exports = {
  //...
  output: {
    clean: true, // Clean the output directory before emit.
  },
};

module.exports = {
  //...
  output: {
    clean: {
      dry: true, // Log the assets that should be removed instead of deleting them.
    },
  },
};

module.exports = {
  //...
  output: {
    clean: {
      keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'.
    },
  },
};

// or

module.exports = {
  //...
  output: {
    clean: {
      keep(asset) {
        return asset.includes('ignored/dir');
      },
    },
  },
};