preliminary/webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const OptimizeCssAssesetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common,{
  mode:'production',
  devtool:'source-map',
  optimization:{
    splitChunks:{
      chunks:'all',
      cacheGroups:{
        vendor:{
          name:'vendor',
          test:/[\\/]node_modules[\\/]/,
          priority:10,
          chunks:'initial'
        }
      }
    },
    minimizer:[
      new UglifyJsPlugin({
        uglifyOptions:{
          warnings: false, // 去除警告
          compress:{
            drop_debugger: true, // 去除debugger
            drop_console: true // 去除console.log
          }
        },
        cache:true,
        parallel:true,
        sourceMap:false,
      }),
      new OptimizeCssAssesetsPlugin({})
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'js/[id].[hash].css',
    }),
  ],
  module: {
    rules: [{
      test:/\.css$/,
      use:[{
        loader: MiniCssExtractPlugin.loader,
        options: {
          // you can specify a publicPath here
          // by default it use publicPath in webpackOptions.output
          publicPath: '../'
        }
      },
        'css-loader'
      ]
    },{
      test:/\.less$/,
      use:[{
        loader: MiniCssExtractPlugin.loader,
        options:{
          publicPath:'../'
        }
      },
        'css-loader',
        'less-loader'
      ]
    }]
  }
});