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,
    }),
posted @ 2020-06-08 12:40  JadePeng  阅读(617)  评论(0编辑  收藏  举报