webpack4升级采坑

3,651 阅读1分钟

没办法,ts现在webpack不是最新版的话,相关的插件用不了。只好踩一波坑了。

第一坑 Cannot find module 'webpack/bin/config-yargs'

"webpack": "^4.8.3", "webpack-cli": "^2.1.3", "webpack-dev-server": "^3.1.4",

这个问题就是说,你不能光是升级webpack啊,相应的配件也要跟着升级一下啊!!

第二坑webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

这个问题是说以前UglifyJsPlugin是webpack内置的,但是现在它现在分出来了

const path = require('path');
const relativeBuildPath = 'build';
const relativeOutputPath = 'demo';
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  target: 'web',
  mode: 'production',
  devtool: ' ',
  entry: './demo/scarlett-game.js',
  output: {
    path: path.resolve(relativeBuildPath),
    publicPath: relativeOutputPath,
    filename: 'bundle.min.js'
  },
  optimization: {
    minimize: false
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          } 
        }]
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin({
      uglifyOptions: {
        warning: "verbose",
        ecma: 6,
        beautify: false,
        compress: false,
        comments: false,
        mangle: false,
        toplevel: false,
        keep_classnames: true,
        keep_fnames: true
      }
    })
  ]
};

第三坑Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found.

html-webpack-plugin这个插件没有更新

第四坑rror: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

解决方案:npm i -D extract-text-webpack-plugin@next