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',
      chunkFilename: 'css/[hash].[hash].css',
    }),
  ],
  module: {
    rules: [{
      test:/\.css$/,
      use:[{
        loader: MiniCssExtractPlugin.loader,
        options: {
          filename:'[name].css',
          chunkFilename:'[name].css',
          minimize: true
          // you can specify a publicPath here
          // by default it use publicPath in webpackOptions.output
          // publicPath: '../'
        }
      },
        // 'css-loader'
        {
          loader:'css-loader',
          options:{
            importLoaders: 2   //该方式可以让@import引入的css文件再次执行一边css打包loader
          }
        }
      ]
    },
    /*{
      test:/\.less$/,
      use:[
        'style-loader',
        'css-loader',
        'less-loader'
      ]
    }*/
    ]
  }
});