156 lines
4.6 KiB
JavaScript
156 lines
4.6 KiB
JavaScript
'use strict'
|
||
const path = require('path')
|
||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
|
||
const webpack = require('webpack')
|
||
const CompressionPlugin = require('compression-webpack-plugin')
|
||
|
||
function resolve(dir) {
|
||
return path.join(__dirname, dir)
|
||
}
|
||
|
||
module.exports = {
|
||
lintOnSave: process.env.NODE_ENV !== 'production',
|
||
|
||
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||
productionSourceMap: false,
|
||
|
||
configureWebpack: config => {
|
||
// 生产环境取消 console.log
|
||
if (process.env.NODE_ENV === 'production') {
|
||
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
|
||
}
|
||
|
||
// 打包文件大小分析
|
||
if (process.env.NODE_ENV === 'production') {
|
||
config.plugins.push(new BundleAnalyzerPlugin())
|
||
}
|
||
},
|
||
|
||
chainWebpack: config => {
|
||
// 生产环境，开启js\css压缩
|
||
if (process.env.NODE_ENV === 'production') {
|
||
config.plugin('compressionPlugin').use(
|
||
new CompressionPlugin({
|
||
test: /\.(js|css|less|html)$/, // 匹配文件名
|
||
threshold: 10240, // 对超过10k的数据压缩
|
||
deleteOriginalAssets: false, // 不删除源文件
|
||
})
|
||
)
|
||
}
|
||
|
||
config
|
||
.plugin('ignore')
|
||
// 忽略/moment/locale下的所有文件
|
||
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
|
||
|
||
// 按需加载icon
|
||
config.resolve.alias.set('@ant-design/icons/lib/dist$', resolve('src/utils/lazy/icons.js'))
|
||
|
||
// 预加载, 提高首屏速度
|
||
config.plugin('preload').tap(() => [
|
||
{
|
||
rel: 'preload',
|
||
// to ignore runtime.js
|
||
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
|
||
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
|
||
include: 'initial',
|
||
},
|
||
])
|
||
|
||
config
|
||
// https://webpack.js.org/configuration/devtool/#development
|
||
.when(process.env.NODE_ENV === 'development', config =>
|
||
config.devtool('cheap-module-eval-source-map')
|
||
)
|
||
|
||
// 去掉空闲加载
|
||
// 空闲加载需要设置 /webpackChunkName: 'chunk-name'/
|
||
config.plugins.delete('prefetch')
|
||
|
||
// set svg-sprite-loader
|
||
config.module
|
||
.rule('svg')
|
||
.exclude.add(resolve('src/assets/icons'))
|
||
.end()
|
||
config.module
|
||
.rule('icons')
|
||
.test(/\.svg$/)
|
||
.include.add(resolve('src/assets/icons'))
|
||
.end()
|
||
.use('svg-sprite-loader')
|
||
.loader('svg-sprite-loader')
|
||
.options({
|
||
symbolId: 'icon-[name]',
|
||
})
|
||
.end()
|
||
|
||
config.when(process.env.NODE_ENV !== 'development', config => {
|
||
config.optimization.splitChunks({
|
||
chunks: 'all',
|
||
cacheGroups: {
|
||
libs: {
|
||
name: 'chunk-libs',
|
||
test: /[\\/]node_modules[\\/]/,
|
||
priority: 10,
|
||
chunks: 'initial', // 只打包初始时依赖的第三方
|
||
},
|
||
antdesignvueUI: {
|
||
name: 'chunk-antdesignvueUI', // 单独将 antdesignvueUI 拆包
|
||
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
|
||
test: /[\\/]node_modules[\\/]ant-design-vue[\\/]es(.*)/, // in order to adapt to cnpm
|
||
},
|
||
commons: {
|
||
name: 'chunk-commons',
|
||
test: resolve('src/components'), // 可自定义拓展你的规则
|
||
minChunks: 3, // 最小共用次数
|
||
priority: 5,
|
||
reuseExistingChunk: true,
|
||
},
|
||
},
|
||
})
|
||
})
|
||
},
|
||
|
||
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
|
||
|
||
// 代理转发
|
||
devServer: {
|
||
port: 3005,
|
||
// open: true, // 自动打开浏览器
|
||
overlay: {
|
||
// 编译页面显示错误
|
||
warnings: false,
|
||
errors: true,
|
||
},
|
||
// proxy: {
|
||
// ['^' + process.env.VUE_APP_API_BASE_URL]: {
|
||
// target: 'http://www.baidu.com',
|
||
// changeOrigin: true,
|
||
// pathRewrite: {
|
||
// ['^' + process.env.VUE_APP_API_BASE_URL]:''
|
||
// }
|
||
// },
|
||
// },
|
||
before: require('./mock/mock-server.js'),
|
||
},
|
||
|
||
// 样式
|
||
css: {
|
||
loaderOptions: {
|
||
less: {
|
||
// lessOptions: {
|
||
// If you are using less-loader@5 please spread the lessOptions to options directly
|
||
modifyVars: {
|
||
/* less 变量覆盖，用于自定义 ant design 主题 */
|
||
'primary-color': '#1890FF',
|
||
'link-color': '#1890FF',
|
||
'border-radius-base': '2px',
|
||
},
|
||
javascriptEnabled: true,
|
||
// },
|
||
},
|
||
},
|
||
extract: { ignoreOrder: true }, // 忽略mini-css-extract-plugin因为css引入顺序不同警告
|
||
},
|
||
}
|