// Important modules this config uses const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WebpackPwaManifest = require('webpack-pwa-manifest'); // const OfflinePlugin = require('offline-plugin'); // const { HashedModuleIdsPlugin } = require('webpack'); const TerserPlugin = require('terser-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = require('./webpack.base.babel')({ mode: 'production', // In production, we skip all hot-reloading stuff entry: [require.resolve('react-app-polyfill/ie11'), path.join(process.cwd(), 'src/app.js')], // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets // [chunkhash:8] [chunkhash:8] output: { filename: 'static/[name].[chunkhash:8].js', chunkFilename: 'static/[name].[chunkhash:8].chunk.js', }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { warnings: false, compress: { comparisons: false, drop_console: true, drop_debugger: true, pure_funcs: ['console.log'], //移除console }, parse: {}, mangle: true, output: { comments: false, ascii_only: true, }, }, parallel: true, cache: true, sourceMap: true, }), ], nodeEnv: 'production', sideEffects: true, concatenateModules: true, runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: 10, minSize: 0, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return `npm.${packageName.replace('@', '')}`; }, }, }, }, }, plugins: [ // Minify and optimize the index.html new HtmlWebpackPlugin({ template: 'src/index.html', minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, inject: true, }), // Put it in the end to capture all the HtmlWebpackPlugin's // assets manipulations and do leak its manipulations to HtmlWebpackPlugin // new OfflinePlugin({ // relativePaths: false, // publicPath: '/', // appShell: '/', // // No need to cache .htaccess. See http://mxs.is/googmp, // // this is applied before any match in `caches` section // excludes: ['.htaccess'], // caches: { // main: [':rest:'], // // All chunks marked as `additional`, loaded after main section // // and do not prevent SW to install. Change to `optional` if // // do not want them to be preloaded at all (cached only when first loaded) // additional: ['*.chunk.js'], // }, // // Removes warning for about `additional` section usage // safeToUseOptionalCaches: true, // }), new CompressionPlugin({ algorithm: 'gzip', test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8, }), new WebpackPwaManifest({ name: '运维管理平台', short_name: '运维管理平台', description: '运维管理平台', background_color: '#fafafa', theme_color: '#b1624d', inject: true, ios: true, icons: [ { src: path.resolve('src/images/icon-512x512.png'), sizes: [72, 96, 128, 144, 192, 384, 512], }, { src: path.resolve('src/images/icon-512x512.png'), sizes: [120, 152, 167, 180], ios: true, }, ], }), // new HashedModuleIdsPlugin({ // hashFunction: 'sha256', // hashDigest: 'hex', // hashDigestLength: 20, // }), ], performance: { assetFilter: assetFilename => !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename), }, });