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

最近在团队推行ts，顺便将webpack做了升级，升级到最新的4.X版本，下面记录一些迁移指南。

VueLoader#

VueLoaderPlugin，显示的引用：#

Copy
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，否则样式不生效

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

ts 支持#

加上ts-loader

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

UglifyJsPlugin#

UglifyJsPlugin 配置位置发生了变化，放到optimization里，如果不想开启minimize，可以配置minimize：false,开启优化的话，可以配置minimizer：

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

CopyWebpackPlugin#

配置发生了变化：

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

ExtractTextPlugin#

之前：

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

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

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

关注作者

欢迎关注作者微信公众号, 一起交流软件开发：