【webpack5 vue.config.js配置】

版本

vue@2.6.14
vue/cli@5.0.0
webpack@5.73.0
webpack-dev-server@4.9.2

//文件package.json

{
  "name": "cptxglpt",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "serve:test": "vue-cli-service serve --mode test",
    "serve:production": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:production": "vue-cli-service build --mode production",
    "build:tp": "vue-cli-service build --mode test && vue-cli-service build --mode production"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.9",
    "jquery": "^3.6.0",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "compression-webpack-plugin": "^5.0.2",
    "node-sass": "^7.0.1",
    "sass-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack-cli": "^4.10.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

webpack配置

const path = require('path');
const resolve = dir => path.join(__dirname, dir);
const webpack = require('webpack');
const Timestamp = new Date().getTime();
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
	/* 从 Vue CLI 3.3 起已弃用，请使用publicPath */
	/* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/', */

	/* 部署生产环境和开发环境下的URL：可对当前环境进行区分 默认值：'/' */
	publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
	/* 当运行 npm run build 时生成的生产环境构建文件的目录 */
	// outputDir: 'dist',
	outputDir: process.env.outputDir,
	/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
	assetsDir: 'assets',
	/* 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 */
	indexPath: 'index.html',
	/* 默认：true,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
	filenameHashing: false,
	/* 用于多页配置，默认是 undefined */
	pages: {
		index: {
			/* page 的入口文件 */
			entry: 'src/main.js',
			/* 模版文件(模板来源) */
			template: 'public/index.html',
			/* 输出文件(在 dist/index.html 的输出) */
			filename: 'index.html',
			/* 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> */
			title: '平台',
			/* 在这个页面中包含的块，默认情况下会包含提取出来的通用 chunk 和 vendor chunk */
			chunks: ['chunk-vendors', 'chunk-common', 'index']
		},
		/* 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html`，并且如果找不到的话，就回退到 `public/index.html`，输出文件名会被推导为 `subpage.html` */
		// subpage: 'src/main.js'
	},
	/* 默认：true,是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 */
	lintOnSave: true,
	/* 默认：false,是否使用包含运行时编译器的 Vue 构建版本 */
	runtimeCompiler: false,
	/* 默认：[],通过 Babel 显式转译 node_modules 中的一个依赖 */
	transpileDependencies: [],
	/* 默认：true,是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
	productionSourceMap: false,
	/* 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性 */
	// crossorigin: 'undefined',
	/* 默认：false,在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性 */
	integrity: false,
	/* 调整内部的 webpack 配置 */
	/* configureWebpack: {
		plugins: [
			new webpack.ProvidePlugin({
				jQuery: 'jquery',
				$: 'jquery',
				'windows.jQuery': 'jquery'
			}),
		],
		// 打包编译后修改 js 文件名
		output: {
			filename: `assets/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
			chunkFilename: `assets/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
		}
	}, */
	configureWebpack: config => {
		/* 引入 jquery 插件 */
		config.plugins.push(new webpack.ProvidePlugin({
			jQuery: 'jquery',
			$: 'jquery',
			'windows.jQuery': 'jquery'
		}));

		/* gzip压缩 */
		config.plugins.push(new CompressionPlugin({
			test: /\.(js|css)?$/i, // 压缩文件类型
			filename: '[path].gz[query]', // 压缩后的文件名
			algorithm: 'gzip', // 使用 gzip 压缩
			minRatio: 0.8, // 压缩率小于 1 才会压缩
			threshold: 10240, // 对超过 10k 的数据压缩
			deleteOriginalAssets: false // 是否删除未压缩的文件(源文件)，不建议开启
		}));
		
		// 打包编译后修改 js 文件名
		config.output.filename = `assets/js/[name].${Timestamp}.js`;
		config.output.chunkFilename = `assets/js/[name].${Timestamp}.js`;

		if(process.env.NODE_ENV === 'production'){
			/* 生产环境 */
			config.mode = 'production';
			// 配置如何展示性能提示
			config['performance'] = {
				hints: 'warning', // 打开/关闭提示
				"maxAssetSize": 250000, // 根据单个资源体积(单位: bytes)，控制 webpack 何时生成性能提示
				"maxEntrypointSize": 250000, // 根据入口起点的最大体积(单位: bytes)，控制 webpack 何时生成性能提示
				// 只给出 .js 文件的性能提示
				assetFilter: function (assetFilename) {
					return assetFilename.endsWith('.js');
				}
			}
		} else if (process.env.NODE_ENV === 'test') {
			/* 测试环境 */
			config.mode = 'none';
		}else{
			/* 开发环境 */
			config.mode = 'development';
		};
	},
	/* 对内部的 webpack 配置进行更细粒度的修改 */
	chainWebpack: config => {
		/* 自定义配置路径别名 */
		config.resolve.alias
			.set('@', resolve('src'))
			.set('@c', resolve('src/components'))

		/* 移除 prefetch 插件 */
		config.plugins.delete('prefetch')
	},
	/* css相关配置 */
	css: {
		/* 启用 CSS modules, 从 v4 起已弃用，请使用css.requireModuleExtension, 在 v3 中，这个选项含义与 css.requireModuleExtension 相反*/
		// modules: false,
		/* 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
		设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块 */
		// requireModuleExtension: false,
		/* 是否使用 css 分离插件 */
		// extract: true,
		extract: {
			// 打包编译后修改 css 文件名
			filename: `assets/css/[name].${Timestamp}.css`,
			chunkFilename: `assets/css/[name].${Timestamp}.css`
		},
		/* 是否为 CSS 开启 source map */
		sourceMap: true,
		/* 向 CSS 相关的 loader 传递选项 */
		loaderOptions: {
			// css: {
			// 	/* 这里的选项会传递给 css-loader */
			// },
			// postcss: {
			// 	/* 这里的选项会传递给 postcss-loader */
			// },
			// sass: {
			// 	/* 这里的选项会传递给 sass-loader */
			// },
			// scss: {
			// 	/* 这里的选项会传递给 scss-loader */
			// 	/* 另外，也可以使用 scss 选项，针对 scss 语法进行单独配置（区别于 sass 语法） */
			// },
			// less: {
			// 	/* 这里的选项会传递给 less-loader */
			// },
			// stylus: {
			// 	/* 这里的选项会传递给 stylus-loader */
			// }
		}
	},
	/* webpack-dev-server 相关配置 */
	devServer: {
		/* 编译完成后自动打开浏览器 */
    open: {
      target: [`http://localhost:8080/`],//可设置多个页面
      app: {
        name: "chrome",//不指定就打开默认浏览器
        // arguments: ["--incognito", "--new-window"],//对应：无痕模式、新开浏览器
      },
    },
		/* 设置为0.0.0.0让你的服务器可以被外部访问 */
		host: '0.0.0.0',
		/* 指定端口号 */
		port: 8080,
		/* 是否使用协议https */
    https: false,
		/* 是否开启热更新 */
		/* 默认true， hotOnly: false,//v4已经删除，由hot: 'only'替代*/
    hot:true,
		/* 当有编译错误或者警告的时候显示一个全屏overlay */
		client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
		/* 使用代理 */
		/* proxy: 'http://v.juhe.cn', */

		/* '/api' : {}, 就是告诉node, 我接口只要是'/api'开头的才用代理, 所以你的接口就要这么写 /api/xx/xx
		最后代理的路径就是 http://xxx.xx.com/api/xx/xx
		可是不对啊, 我正确的接口路径里面没有 /api 啊. 所以就需要 pathRewrite, 用'^/api' : '', 把'/api'去掉, 
		这样既能有正确标识, 又能在请求接口的时候去掉api */
		proxy: {
			'/api': {
				/* 目标代理服务器地址 */
				target: process.env.VUE_APP_URL,
        // target: 'http://192.168.9.187:7666',
        // secure: false,  // 如果是https接口，需要配置这个参数
				/* WebSocket */
				ws: true,
				/* 允许跨域，将请求地址host修改为和被请求的接口一致 */
				changeOrigin: true,
				/* 路径重写 */
				pathRewrite: {
					'^/api': ''
				}
			}
    },
    /* 提供执行自定义函数和应用自定义中间件的能力 */
    //添加报错了
		// setupMiddlewares: (middlewares, devServer) => {
    //   if (!devServer) {
    //     throw new Error('webpack-dev-server is not defined');
    //   }
 
    //    mockServer(devServer.app)
 
    //   return middlewares;
    // },
	},
	/* 是否为 Babel 或 TypeScript 使用 thread-loader, 该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建 */
	parallel: require('os').cpus().length > 1,
	/* 向 PWA 插件传递选项 */
	pwa: {},
	/* 传递任何第三方插件选项 */
	pluginOptions: {}
}