const port = 8080; // 端口號
const IS_PRODUCTION = process.env.NODE_ENV == "production"; // 正式環(huán)境
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin");
/** key 是import 的包名,value 是CDN 為我們提供的全局變量名 */
const externals = {
"ali-oss": "OSS"
};
module.exports = {
// 放在服務器根目錄下面的
publicPath: "/<服務器上項目所在的文件夾名>/",
assetsDir: "static", // 輸出的資源,所在的文件夾
/** 去掉hash */
filenameHashing: false,
chainWebpack: config => {
/** 如果是正式環(huán)境 */
if (IS_PRODUCTION) {
// 解決ie11兼容ES6
config.entry("main").add("babel-polyfill");
/** 刪除懶加載模塊的 prefetch preload,降低帶寬壓力(使用在移動端) */
config.plugins.delete("prefetch").delete("preload");
/** 阿里云SDK --不打包 */
config.externals(externals);
/** gzip 壓縮 */
config
.plugin("compressionPlugin")
.use(CompressionPlugin)
.tap(() => [
{
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //超過10k進行壓縮
deleteOriginalAssets: false //是否刪除源文件
}
]);
/** 去掉console.log debugger sourceMap*/
config.optimization.minimizer([
new UglifyJsWebpackPlugin({
/**這個 sourceMap注釋掉,默認就是置為false.(寫為false 也是可以的)。
* 反之設為true 是生效的。
* 故在官方的配置(productionSourceMap: false)就可以注釋掉了*/
sourceMap: false,
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: true
}
}
})
]);
}
/** 有此插件就不用了去,圖片壓縮網站壓縮圖片了 */
/** png、jpg圖片壓縮有效--已測試 jpg圖片壓縮圖片質量變差*/
config.module
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
bypassOnDebug: true
})
.end();
/** 文件名稱hash 三種規(guī)則 */
/**hash chunkhash contenthash */
// config.output.filename("[name].[contenthash].js").end();
},
devServer: {
port: port, // 端口號
host: "0.0.0.0",
https: false, // https:{type:Boolean}
open: false, //配置自動啟動瀏覽器
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_BASE_URL,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
}
}
},
css: {
loaderOptions: {
stylus: {
"resolve url": true,
import: []
}
}
}
};
vue項目打包優(yōu)化配置-----vue.config.js文件(基于vue-cli3)
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。