webpack升級到4.x 不完全指南

最近在團隊推行ts，順便將webpack做了升級，升級到最新的4.X版本，下面記錄一些遷移指南。

VueLoader

VueLoaderPlugin，顯示的引用：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

less問題

less需要單獨的配置規則,注意一定要加上vue-style-loader，否則樣式不生效

{
  module: {
    rules: [
      // ... other rules
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

ts 支持

加上ts-loader

 {
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/,
            options: {
                appendTsSuffixTo: [/\.vue$/],
            }
        },

UglifyJsPlugin

UglifyJsPlugin 配置位置發生了變化，放到optimization里，如果不想開啟minimize，可以配置minimize：false,開啟優化的話，可以配置minimizer：

// webpack.optimize.UglifyJsPlugin
    optimization: {
        // minimize: false,
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                uglifyOptions: {
                    compress: false
                },
                sourceMap: false
            })
        ]
    }

CopyWebpackPlugin

配置發生了變化：

        // copy custom static assets
        new CopyWebpackPlugin({
            patterns: [{
                from: path.resolve(__dirname, '../static'),
                to: config.dev.assetsSubDirectory
            }]
        })

ExtractTextPlugin

之前：

 new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: true,
    }),

contenthash已不能使用，換成hash即可

    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[hash].css'),
      allChunks: true,
    }),