webpack.prod.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. module.exports = WebpackMerge.merge(baseConfig, {
  8. mode: 'production',
  9. //开发环境下默认启用cache,在内存中对已经构建的部分进行缓存
  10. //避免其他模块修改,但是该模块未修改时候,重新构建,能够更快的进行增量构建
  11. //属于空间换时间的做法
  12. cache: true,
  13. // 代码入口
  14. entry: {
  15. // 注册界面
  16. main: './src/index.js',
  17. },
  18. output: {
  19. path: path.resolve(__dirname, './dist'),
  20. publicPath: './',
  21. filename: './eam-app-v3-js-bundle/[name].[contenthash:8].js',
  22. chunkFilename: './eam-app-v3-js-chunk/[name].[contenthash:8].js',
  23. },
  24. optimization: {
  25. minimize: true, // 压缩 bundle
  26. splitChunks: {
  27. // include all types of chunks
  28. chunks: 'all',
  29. name: false,
  30. minSize: 30000,
  31. maxSize: 500000,
  32. cacheGroups: {
  33. common: {
  34. test: /[\\/]node_modules[\\/]/,
  35. name: 'common',
  36. chunks: 'initial',
  37. priority: 2,
  38. minChunks: 2,
  39. },
  40. }
  41. },
  42. },
  43. //devtool: 'source-map', // 打包不需要 source-map
  44. plugins: (module.exports.plugins || []).concat([
  45. new HtmlWebpackPlugin({
  46. title: 'Prodog App',
  47. template: './static-eam-app/index.html', // 源模板文件
  48. filename: './app.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
  49. chunks: ['main']
  50. }),
  51. new webpack.LoaderOptionsPlugin({
  52. minimize: true
  53. }),
  54. // CSS 提取
  55. new MiniCssExtractPlugin({
  56. filename: "./eam-app-v3-style/[name].[contenthash:8].css"
  57. }),
  58. ])
  59. })