// vue.config.js的基础配置
const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩
const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀
const merge = require("lodash.merge"); //对象合并插件
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); //用于去掉注释
const AutoCodePlugin = require("./webpack/plugins/auto.code.plugin"); //组件自动化
const resolve = dir => path.join(__dirname, dir)
module.exports = {
//将部署应用程序包的基本URL(baseUrl在Vue CLI 3.3之前称为)
publicPath: "./",
outputDir: "dist",
assetsDir: "assets", // 静态资源目录 (js, css, img, fonts)
productionSourceMap: false, // 生产环境 sourceMap,不生成map文件
lintOnSave: false,//关闭eslint
devServer: {
port: 9020, // 设置端口
open: true, // 启动后打开浏览器
overlay: {
// 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
warnings: false,
errors: true
}
// proxy: {
// "/*****/": {
// target: "https://*****.me",
// // false为http访问,true为https访问
// // secure: false,
// //是否跨域
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// "^/*****": "",
// },
// },
// },
},
//是否将组件中的css文件提取到独立的css文件
css: {
extract: process.env.NODE_ENV === "production",
},
// webpack配置(大部分操作都在此--压缩。去除打印)
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') { //判断是生产环境
return {
plugins: [
// 构建时开启gzip,降低服务器压缩对CPU资源的占用,服务器也要相应开启gzip
new CompressionPlugin({
algorithm: 'gzip',//开启gzip
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
}),
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ["console.log"], //移除console
},
},
}),
new AutoCodePlugin([
{
/** ********* 组件自动化注册 ***********/
// 文件监听等级
maxlevel: 1,
// 监听./src/router/*下的文件夹
inPath: resolve("src/components"),
// 自动在./src/router/目录下生成index.js
outPath: resolve("src/components/index.js"),
// 模板
// fileName: 文件夹名称
// filePath: 文件夹路径
templateEach: (fileName) => {
// chunk名称
return `Vue.component('${fileName}', () => import(/* webpackChunkName: "components${fileName}" */
vue.config.js配置打包之类操作 webpack(压缩js,css,图片)
最新推荐文章于 2024-04-07 14:57:39 发布