configureWebpack值为对象的配置方式
const path = require('path')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
module.exports = {
publicPath: '/', //基本路径
outputDir: 'dist', //构建时的输出目录
assetsDir: '', //放置静态资源的目录
indexPath: 'index.html', //html的输出路径
filenameHashing: false, //文件名哈希
lintOnSave: true, //eslint 是否在保存时检查
runtimeCompiler: true, //是否使用带有浏览器内编译器的完整构建版本
productionSourceMap: process.env.NODE_ENV === 'production' ? false : true, //如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
plugins: [
// 生成仅包含颜色的替换样式(主题色等)
new ThemeColorReplacer({
fileName: 'style/theme-colors.[contenthash:8].css',
matchColors: [
...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // element-ui主色系列
],
externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'],
changeSelector: forElementUI.changeSelector,
})
]
},
// devServer: {
// proxy: {
// '/api': {
// target: 'http://192.168.0.136:8088', //需要代理的地址
// changeOrigin: true, //是否跨域
// // ws: true, //是否启用webSocket
// pathRewrite: {'/api': ''},
// },
// },
// },
};
configureWebpack值为函数的配置方式
let CompressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
// publicPath: './',
// 打包到子域下面 http://www.baidu.com/sub
// publicPath: '/sub/',
// outputDir: "dist/sub", //输出目录
// productionSourceMap: process.env.NODE_ENV==='production' ? false : true,
//配置webpack
configureWebpack: config=>{
let plugins = [
new CompressionWebpackPlugin({
algorithm: 'gzip', //压缩方式
test: /\.js$|\.css$/, //匹配压缩文件
threshold: 10240 //对大于10k压缩
})
]
if (process.env.NODE_ENV === 'production') {
config.mode = "production";
config.plugins = [...config.plugins, ...plugins]
}else{
config.mode = "development"
}
Object.assign(config, {
externals: { //排除不需要依赖包
vue: 'Vue', //import Vue from 'vue'
axios: 'axios' //import axios from 'axios'
}
})
}
}