总结webpack常见报错信息

前言

• 因为webpack坑还是挺多的，所以打算持续记录自己踩过的坑跟大家一起分享

三个方面

1. (webpack打包css) You may need an appropriate loader to handle this file type

• 我在使用require("./style.css");的时候,也就是想要把css文件也一并打包,但是webpack本身是不支持的,所以我们需要安装
  

• npm install css-loader style-loader --save-dev

• 接下来指定loader

  把 require("./style.css");改为:

  require("css-loader!./style.css");//引用这个页面的时候,先经过css-loader处理

• require("style-loader!css-loader!./style.css");

• 最后再重新打包就可以了
  

• 当然你也可以不在代码中添加style-loader!css-style!, 而是在打包过程中设置绑定依赖,如下命令
  

• npx webpack a.js -o a.bundle.js --module-bind "css=style-loader!css-loader" --mode development    

• 注意: 是双引号.不是单引号...
  

• 
  

2. webpack使用清除插件出现 TypeError: CleanWebpackPlugin is not a constructor

• 在新版本webpack4.使用清除插件出现问题：

• 
  

• 由于现在新版本的 clean-webpack-plugin 插件引入已经改为const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  所以使用webpack中文网上的例子时会报错；

• 原写法：
  

• 
  

• 更改后写法：
  

• 
  

• 这里不用指向dist ；效果一样；

3. ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» 的错误处理

• webpack打包时使用UglifyJs（github地址）来压缩美化JS代码，在npm run build时报错了：
  

• // webpack.prod.js 内容
  const merge = require('webpack-merge')
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
  const common = require('./webpack.common.js')
  
  module.exports = merge(common, {
      plugins: [
          new UglifyJSPlugin()
      ]
  })

• 报错截图：
  

• 
  

• 解决方法

• 需要安装babel-preset-es2015，若babel-core、babel-loader没有安装的话也要安装上：
  

• npm install --save-dev babel-loader babel-core babel-preset-es2015

• 安装完以后，再修改webpack.prod.js中添加rules规则：
  

• const merge = require('webpack-merge')
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
  const common = require('./webpack.common.js')
  
  module.exports = merge(common, {
      plugins: [
          new UglifyJSPlugin()
      ],
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: [{
                      loader: 'babel-loader',
                      options: {
                          presets: ['es2015']
                      }
                  }],
                  exclude: /node_modules/
              }
          ]
      }
  })

• 再执行npm run build，如果出现了以下错误（babel相关的错误）：
  

• 
  

• 这个错误日志指出了原因：找不到'@babel/core'，再按照错误提示的操作说明可以知道：babel-loader@8 需要 Babel 7（里面的包'@babel/core'），如果你想要使用 Babel 6.x版本，你应该安装'babel-loader@7'。在package.json文件中可以看到我们安装的版本： 

• 
  

• 那我们就按照提示进一步处理：
  

• npm install --save-dev babel-loader@7

• 此时package.json文件中安装的版本：
  

• 
  

• 此时再执行npm run build即可成功构建了。