webpack.prod.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. const path = require('path');
  2. const webpack = require('webpack');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const WebpackMerge = require('webpack-merge');
  6. const baseConfig = require('./webpack.base.js');
  7. const TerserPlugin = require('terser-webpack-plugin');
  8. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  9. module.exports = WebpackMerge.merge(baseConfig, {
  10. mode: 'production',
  11. //开发环境下默认启用cache,在内存中对已经构建的部分进行缓存
  12. //避免其他模块修改,但是该模块未修改时候,重新构建,能够更快的进行增量构建
  13. //属于空间换时间的做法
  14. cache: true,
  15. // 代码入口
  16. entry: {
  17. // 注册界面
  18. main: './src/main.js',
  19. },
  20. output: {
  21. path: path.resolve(__dirname, './dist'),
  22. publicPath: './',
  23. filename: './client-eam-v3-js-bundle/[name].[contenthash:8].js',
  24. chunkFilename: './client-eam-v3-js-chunk/[name].[contenthash:8].js',
  25. },
  26. optimization: {
  27. minimize: true, // 压缩 bundle
  28. minimizer: [new TerserPlugin({
  29. parallel: true, //使用多进程并发运行以提高构建速度 Boolean|Number 默认值: true
  30. terserOptions: {
  31. format: {
  32. comments: false,//删除注释
  33. },
  34. },
  35. extractComments: false, //不将注释提取到单独的文件中
  36. })],
  37. splitChunks: {
  38. // include all types of chunks
  39. chunks: 'all',
  40. name: false,
  41. minSize: 30000,
  42. maxSize: 500000,
  43. cacheGroups: {
  44. common: {
  45. test: /[\\/]node_modules[\\/]/,
  46. name: 'common',
  47. chunks: 'initial',
  48. priority: 2,
  49. minChunks: 2,
  50. },
  51. },
  52. },
  53. },
  54. //devtool: 'source-map', // 打包不需要 source-map,注释掉本行,打包的时候,不生成 source-map
  55. plugins: (module.exports.plugins || []).concat([
  56. // 清除dist文件夹
  57. new CleanWebpackPlugin(),
  58. new HtmlWebpackPlugin({
  59. title: 'Prodog',
  60. template: './public/index-release.html', // 源模板文件
  61. filename: './index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
  62. chunks: ['main'],
  63. }),
  64. // CSS 提取
  65. new MiniCssExtractPlugin({
  66. filename: './client-eam-v3-style/[name].[contenthash:8].css',
  67. }),
  68. ]),
  69. });