webpack5.0配置 填坑记

• HtmlWebpackPlugin 在配置时需要特别注意 template属性的配置，建议使用默认配置，可以在filename配置时更改index.html文件的存放位置
• webpack5.0中会自动生成 .LICENSE.txt后缀的文件，但是这个文件对我们来说其实是没什么意义的。如下图：

是因为 Webpack 5.0 默认压缩代码工具为terser-webpack-plugin，该工具默认会生成 LICENSE.txt 文件。

解决：npm install terser-webpack-plugin --save-dev 然后按照下方代码进行配置即可。插件地址

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
        extractComments: false
    })],
  },
};

• url-loader 添加limit选项后 报错 Error: Cannot find module ‘file-loader‘ 

报错原因：在limit大小范围内的图片会使用url-loader去解析，但是超过limit大小的图片 会默认启动file-loader去解析，但是没安装file-loader，因此提示 file-loader not find。

注意：解析字体时需要使用file-loader，否则使用url-loader的话无法将字体抽离成单独的文件

• webpack打包时控制台无任何报错，打包成功了，但是一直卡在warning的地方不动，也没有打包文件输出。

是因为 prod环境下的打包命令配置错误，导致的。去掉serve即可成功输出打包文件