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',
/* 默认情况下，生成的静态资源在它们的文件名中包含了 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: 'Index Page',
/* 在这个页面中包含的块，默认情况下会包含提取出来的通用 chunk 和 vendor chunk */
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
/* 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html`，并且如果找不到的话，就回退到 `public/index.html`，输出文件名会被推导为 `subpage.html` */
// subpage: 'src/main.js'
},
/* 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 */
lintOnSave: true,
/* 是否使用包含运行时编译器的 Vue 构建版本 */
runtimeCompiler: false,
/* 通过 Babel 显式转译 node_modules 中的一个依赖 */
transpileDependencies: [],
/* 是否在构建生产包时生成 sourceMap 文件，false 将提高构建速度 */
productionSourceMap: false,
/* 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性 */
// crossorigin: 'undefined',
/* 在生成的 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: true,
/* 指定打开浏览器时要浏览的页面 */
/* openPage: '/different/page', */
/* 设置为0.0.0.0则所有的地址均能访问 */
host: '0.0.0.0',
/* 指定端口号 */
port: 8080,
/* 是否使用协议https */
https: false,
/* 是否开启热更新 */
hotOnly: false,
/* 是否要显示警告和错误 */
overlay: {
warnings: true,
errors: true
},
/* 使用代理 */
/* 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,
/* WebSocket */
ws: true,
/* 允许跨域 */
changeOrigin: true,
/* 路径重写 */
pathRewrite: {
'^/api' : ''
}
}
},
before: app => {}
},
/* 是否为 Babel 或 TypeScript 使用 thread-loader, 该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建 */
parallel: require('os').cpus().length > 1,
/* 向 PWA 插件传递选项 */
pwa: {},
/* 传递任何第三方插件选项 */
pluginOptions: {}
}
网友评论