项目常用配置
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: false, // eslint-loader 是否在保存的时候检查
outputDir:'dist', // 输出文件目录
assetsDir:'static', // 放置静态资源的地方 (js/css/img/font/...)
productionSourceMap: process.env.VUE_APP_ENV != 'prod', //生产环境是否生成 sourceMap 文件 ,此判断条件为不在正式 环境打包时进行输出
// 调整内部的 webpack 配置。
chainWebpack: (config) => {
config.plugins.delete('prefetch'); //prefetch意思是，一旦网络空闲，就自动下载独立.js文件
//快速找到相应路径，例如，@直接找到项目的src目录
config.resolve.alias
.set('@', resolve('src'))
.set('common', resolve('src/common'))
.set('base', resolve('src/base'))
.set('api', resolve('src/api'))
.set('components', resolve('src/components'))
.set('static', resolve('static'));
if (process.env.VUE_APP_ENV == 'prod' && process.env.NODE_ENV != "development") {
//进行压缩代码
config.optimization.minimize(true);
// 进行分包配置
config.optimization.splitChunks({
chunks: 'all'
})
// 用cdn方式引入
config.externals({
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'mint-ui': 'MINT', // 需用MINT
'axios': 'axios'
})
const TerserPlugin = require('terser-webpack-plugin'); //内置压缩工具包
config.optimization.minimizer([
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
},
output: {
// 去掉注释内容
comments: false,
}
}
})
])
}
},
//默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
publicPath: '/test/',
css: {
// 当为true时，css文件名可省略 module 默认为 false
modules: true,
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
// 默认生产环境下是 true，开发环境下是 false
extract: false,
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
sourceMap: false,
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
loaderOptions: { css: {}, less: {} }
},
configureWebpack: (config) => {
let plugins = [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
drop_debugger: true
},
output: {
// 去掉注释内容
comments: false,
}
},
sourceMap: false,
// parallel: true,
})
];
// 只有打包生产环境才需要将console删除
if (process.env.VUE_APP_ENV == 'prod') {
config.plugins = [...config.plugins, ...plugins];
}
},
}
