webpack4升級採坑

阿9發表於2018-08-01
Web

沒辦法，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

相關文章