// const path = require('path');
// const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用
// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
// const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
// const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
// baseUrl:"",//从 Vue CLI 3.3 起已弃用,使用blicPath
/**
* 设置项目的基路径,设置process.env.BASE_URL
* 例如:http://192.168.43.243:8080 ==> http://192.168.43.243:8080/test
* 默认:'/'
* 注意:使用 publicPath 而不要直接修改 webpack 的 output.publicPath
*/
publicPath: '/',
/**
* vue-cli-service build 时生成的生产环境构建文件的目录
* 默认:'dist'
* 默认删除构建目录,--no-clean可消除行为
* 注意:使用 outputDir 而不要修改 webpack 的 output.path
*/
outputDir: 'dist',
/**
* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
* 默认:''
*/
assetsDir: '',
/**
* 指定生成的 index.html 的输出路径 (相对于 outputDir)
* 默认:'index.html'
*/
indexPath: 'index.html',
/**
* 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
* 例如:true==>app.e2713bb0.css false==>app.css
* 默认:true
*/
filenameHashing: true,
pages: undefined,
lintOnSave: false, // 在保存后eslint检查代码。将值设置为'error'是把错误直接输出为编译错误。process.env.NODE_ENV !== 'production',在生产环境上设为false。
transpileDependencies: [],
/**
* 是否生成.map文件`
* 默认:true
* 开发环境设置为false加速开发
* 发布环境设置为true
* .map文件作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错
*/
productionSourceMap: false,
/**
* 设置生成的 HTML 中 <link> 和 <script> 标签的 crossorigin 属性
* 默认:undefined
*/
crossorigin: undefined,
/**
* 在生成的 HTML 中的 <link> 和 <script> 标签上启用 Subresource Integrity (SRI)
* 默认:false
*/
integrity: true,
/**
* 配置webpack(简单配置)
*/
// chainWebpack: (config) => {
// // 添加别名
// config.resolve.alias
// .set('@', resolve('src'))
// .set('src', resolve('src'))
// .set('common', resolve('src/common'))
// .set('components', resolve('src/components'));
// // 压缩图片
// // 需要 npm i -D image-webpack-loader
// config.module
// .rule('images')
// .use('image-webpack-loader')
// .loader('image-webpack-loader')
// .options({
// mozjpeg: { progressive: true, quality: 65 },
// optipng: { enabled: false },
// pngquant: { quality: [0.65, 0.9], speed: 4 },
// gifsicle: { interlaced: false },
// webp: { quality: 75 },
// });
// // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
// if (IS_PROD) {
// config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
// {
// analyzerMode: 'static',
// },
// ]);
// }
// },
// configureWebpack: (config) => {
// // 开启 gzip 压缩
// // 需要 npm i -D compression-webpack-plugin
// const plugins = [];
// if (IS_PROD) {
// plugins.push(
// new CompressionWebpackPlugin({
// filename: '[path].gz[query]',
// algorithm: 'gzip',
// test: productionGzipExtensions,
// threshold: 10240,
// minRatio: 0.8,
// })
// );
// }
// config.plugins = [...config.plugins, ...plugins];
// },
/**
* 配置webpack(链式操作)
*/
// chainWebpack:{},
/**
* css配置
* css.modules:
* css.extract:
* css.sourceMap:是否生成css.map文件
* css.loaderOptions:
*/
css: {
modules: false,
extract: true,
sourceMap: true,
loaderOptions: {
//配置全局scss变量或者mixin....
sass: {
// data: `@import "@/global.scss";`
},
// 给 less-loader 传递 Less.js 相关选项
// less: {
// // `globalVars` 定义全局对象,可加入全局变量
// globalVars: {
// primary: '#333',
// },
// lessOptions: {
// modifyVars: {
// 'primary-color': 'pink',
// 'link-color': '#pink',
// 'border-radius-base': '2px',
// },
// javascriptEnabled: true,
// },
// },
},
},
/**
* webpack-dev-server配置
* devServer.proxy:
*/
devServer: {
open: false, //配置自动启动浏览器
hot: true, // 热模块替换,就是热更新页面
compress: true, // 为所服务的一切启用gzip压缩
host: '0.0.0.0', // 指定要使用的主机。默认情况下这是localhost。
port: 8080, // 端口号,
// 所有 webpack-dev-server 的选项都支持。注意:
// 有些值像 host、port 和 https 可能会被命令行参数覆写。
// 有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
// proxy:"url地址",// 前端应用和后台API服务没有运行在一个主机上,设置此项在开发环境下代理到API服务器。
// proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理
//配置多个跨域
proxy: {
// 配置不同的后台API地址
'/http://a.itying.com': {
target: 'http://a.itying.com',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/http://a.itying.com': '',
},
},
'/foo': {
target: '<other_url>',
},
},
},
// parallel:require('os').cpus().length > 1,
// pwa:{},
// pluginOptions:{}
};
Vue CLI4 Vue.config.js标准配置(最全注释)
猜你喜欢
转载自blog.csdn.net/weixin_44714325/article/details/113104663
今日推荐
周排行