webpack.prod.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. const baseConfig = require("./webpack.common");
  2. const { merge } = require("webpack-merge");
  3. const CopyWebpackPlugin = require("copy-webpack-plugin");
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  5. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
  7. const webpack = require("webpack");
  8. const PurgeCSSPlugin = require("purgecss-webpack-plugin");
  9. const resolveApp = require("./paths");
  10. const glob = require("glob");
  11. const CompressionPlugin = require("compression-webpack-plugin");
  12. // var InlineChunkHtmlPlugin = require('inline-chunk-html-plugin');
  13. // const HtmlWebpackPlugin = require('html-webpack-plugin');
  14. module.exports = merge(baseConfig(true), {
  15. mode: "production",
  16. plugins: [
  17. new CleanWebpackPlugin(),
  18. new CopyWebpackPlugin({
  19. patterns: [
  20. {
  21. from: "public",
  22. to: "public",
  23. globOptions: {
  24. ignore: ["**/index.html"],
  25. },
  26. },
  27. ],
  28. }),
  29. new MiniCssExtractPlugin({
  30. // css单独拆分为文件
  31. filename: "css/[name].[hash:6].css",
  32. }),
  33. new webpack.optimize.ModuleConcatenationPlugin(), // 作用域提升,提升性能
  34. new PurgeCSSPlugin({
  35. paths: glob.sync(`${resolveApp("./src")}/**/*`, { nodir: true }),
  36. }),
  37. new CompressionPlugin({
  38. test: /\.(css|js)$/i,
  39. algorithm: "gzip",
  40. }),
  41. // new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime/]) // 将一定大小文件直接注入 html,
  42. ],
  43. optimization: {
  44. chunkIds: "deterministic", // 文件名称尽可能短,也会是序号类型
  45. splitChunks: {
  46. chunks: "all",
  47. minSize: 20000, // 拆分的每个包不小于20kb
  48. maxSize: 20000, // 体积大于设置的值的包要去拆分开包
  49. minChunks: 1, // 包如果要拆分,则必须要至少引用一次
  50. cacheGroups: {
  51. syVendors: {
  52. test: /[\\/]node_modules[\\/]/, // 对目录内文件进行单独打包拆分,且放入一个文件中 vender
  53. filename: "js/[id]_verdor.js", // 最终名字
  54. priority: -10, // 都满足时候的优先级,越高月用
  55. },
  56. },
  57. },
  58. minimizer: [new CssMinimizerPlugin()],
  59. },
  60. });