webpack报错收集整理

————————————————————————————————————————————

1.Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

【报错场景】：使用插件html-webpack-plugin后，执行npm run build时出现

【原因分析】：项目中有依赖的webpack的不能是全局,需要在项目中单独安装

【解决方法】：在本地安装webpack npm install webpack --save-dev (简写：npm i webpack -D) 

2.TypeError: CleanWebpackPlugin is not a constructor

【报错场景】：在新版本webpack4.x中使用插件clean-webpack-plugin  

const CleanWebpackPlugin = require('clean-webpack-plugin');
... ...
new CleanWebpackPlugin(['dist'])

【原因分析】：新版本的 clean-webpack-plugin 插件引入已经改为 

 const { CleanWebpackPlugin } = require('clean-webpack-plugin');  

【解决方法】：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');   // 引入
... ... 
new CleanWebpackPlugin()

3.使用 webpack 打包，图片地址变成了 [object Module]

这个问题是 file-loader 在 5.0.0 的更新中造成的：

BREAKING CHANGES

• minimum required nodejs version is 10.13.0
• rename the esModules option to esModule
• switch to ES modules by default (the option esModule is true by default)

从更新日志看到，5.0.0 默认将 esModule 设置为了 true。所以我们只要显示的将它再改为 false 就好了，下面是一段配置示例：

{
    test: /.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          esModule: false,   // 修改为 false
          limit: 1024*5
        }
      }
    ]
}

url-loader 是对 file-loader 的封装，目的是可以使用 limit 来判断是否把图片编译成 base64 格式，最后还是会调用 file-loader，所以设置 esModule 同样有效。