client-trace-v5/webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./webpack.base.js')

module.exports =  WebpackMerge.merge(baseConfig, {
  mode: 'production',
  //开发环境下默认启用cache，在内存中对已经构建的部分进行缓存
  //避免其他模块修改，但是该模块未修改时候，重新构建，能够更快的进行增量构建
  //属于空间换时间的做法
  cache: true,
  // 代码入口
  entry: {
    // 注册界面
    main: './src/main.js',
  },

  output: {
    path: path.resolve(__dirname, '../dist/dist/app'),
    publicPath: './dist/app/',
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].js',
  },


  devtool: 'source-map',

  plugins: (module.exports.plugins || []).concat([


    new HtmlWebpackPlugin({
      title: 'Prodog',
      template: './static/htmls/template.html',  // 源模板文件
      filename: (process.env.NODE_ENV === 'production') ? '../../index.html' : './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
      chunks: ['main']
    }),

    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),

    // CSS 提取
    new MiniCssExtractPlugin({
      filename: "style/[name].[contenthash:8].css"
    }),

  ])
})