"use strict"; const path = require("path"); // 代码压缩 const TerserPlugin = require('terser-webpack-plugin') // gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin') // 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' function resolve (dir) { return path.join(__dirname, dir); } console.log(process.env) module.exports = { productionSourceMap: false, lintOnSave: false, configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${new Date().getTime()}.js`, chunkFilename: `[name].${new Date().getTime()}.js` } }, chainWebpack: config => { // 使用svg-sprite-loader加载icon图标 config.module .rule("svg") .exclude.add(resolve("src/icons")) .end(); config.module .rule("icons") .test(/\.svg$/) .include.add(resolve("src/icons")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end(); // 图片压缩 if (isProduction) { // 删除预加载 config.plugins.delete('preload'); config.plugins.delete('prefetch'); // 压缩代码 config.optimization.minimize(true); // 分割代码 config.optimization.splitChunks({ chunks: 'all' }) } }, configureWebpack: config => { // 生产环境相关配置 if (isProduction) { // 代码压缩 config.plugins.push( new TerserPlugin({ terserOptions: { //生产环境自动删除console compress: { warnings: false, // 若打包错误,则注释这行 drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) // gzip压缩 const productionGzipExtensions = ['html', 'js', 'css'] config.plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + productionGzipExtensions.join('|') + ')$' ), threshold: 10240, // 只有大小大于该值的资源会被处理 10240 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false // 删除原文件 }) ) // 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } } } } };