vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
更新時間：2024年10月10日 10:05:41 作者：你不講 wood
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過對象或函數修改配置,簡單直接；chainWebpack則使用WebpackChainAPI,適合復雜配置,兩者可以結合使用,以達到更精細的配置需求,幫助開發(fā)者優(yōu)化項目構建
configureWebpack
介紹
configureWebpack 允許你在 Vue CLI 項目中直接修改 Webpack 的配置。
它可以通過一個對象或一個函數來實現。
如果你使用的是一個函數，那么它會接收默認的 Webpack 配置作為參數，并且你應該返回一個修改過的配置對象。
用法
configureWebpack 可以是一個對象或一個函數：
作為對象：
- 如果 configureWebpack 是一個對象，那么這個對象將會通過 webpack-merge 合并到最終的 Webpack 配置中。
- 這種方式適合簡單的配置修改。
作為函數：
- 如果 configureWebpack 是一個函數，那么它會接收默認的 Webpack 配置作為參數。
- 函數可以修改配置并不返回任何東西，也可以返回一個被克隆或修改過的配置版本。
- 這種方式適合更復雜的配置修改，特別是當你需要基于環(huán)境變量或其他條件動態(tài)修改配置時。
常見配置示例
添加別名
const path = require("path");
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
}
};修改輸出文件名
module.exports = {
configureWebpack: {
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].chunk.js'
}
}
};添加 Webpack 插件
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
})
);
},
};添加額外的 Loader
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.md$/,
use: [
'vue-loader',
{
loader: 'markdown-loader',
options: {
// markdown-loader 的選項
}
}
]
}
]
}
}
};修改性能提示
module.exports = {
configureWebpack: (config) => {
config.performance = {
hints: false, // 關閉性能提示
maxEntrypointSize: 500000,
maxAssetSize: 300000,
};
},
};修改優(yōu)化選項
module.exports = {
configureWebpack: (config) => {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 去除 console
drop_debugger: true, // 去除 debugger
},
},
}),
],
},
},
};示例
對象形式:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
function resolve(dir) {
return path.join(__dirname, dir);
}
const name = '瀏覽器網頁標題';
module.exports = {
configureWebpack: (process.env.NODE_ENV === 'production') ? {
name: name,
plugins: [
new WebpackObfuscator({ // js 混淆配置
controlFlowFlattening: false,
deadCodeInjection: false,
ignoreImports: true, // 這里設置為true
stringArrayThreshold: 0.3,
// 壓縮代碼
compact: true,
// 是否啟用控制流扁平化(降低1.5倍的運行速度)
controlFlowFlattening: false,
// 隨機的死代碼塊(增加了混淆代碼的大小)
deadCodeInjection: false,
// 此選項幾乎不可能使用開發(fā)者工具的控制臺選項卡
debugProtection: false,
// 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，從而更難使用“開發(fā)人員工具”的其他功能。
debugProtectionInterval: false,
// 通過用空函數替換它們來禁用console.log，console.info，console.error和console.warn。這使得調試器的使用更加困難。
disableConsoleOutput: true,
// 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否啟用全局變量和函數名稱的混淆
renameGlobals: false,
// 通過固定和隨機（在代碼混淆時生成）的位置移動數組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數可以引起注意。
rotateStringArray: true,
// 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true;
selfDefending: true,
// 刪除字符串文字并將它們放在一個特殊的數組中
stringArray: true,
rotateUnicodeArray: true,
// stringArrayEncoding: 'base64',
stringArrayEncoding: ['base64'],
stringArrayThreshold: 0.75,
// 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
unicodeEscapeSequence: false,
// 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
transformObjectKeys: true,
}, []),
],
devtool: process.env.NODE_ENV === "production" ? "false" : "source-map",
resolve: {
alias: {
"@": resolve("src"), // 添加別名 @
'vue': path.resolve(__dirname, './', 'node_modules', 'vue') // 去重vue包,多個vue包會導致element-ui 里的 table 組件不生效
},
},
// 打包生產環(huán)境時過濾console.log打印日志
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 去除 console
drop_debugger: true, // 去除 debugger
},
},
}),
],
},
} : {},
}函數形式:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
function resolve(dir) {
return path.join(__dirname, dir);
}
const name = '瀏覽器網頁標題';
module.exports = {
configureWebpack: (config) => {
config.name = name,
config.resolve = {
...config.resolve,
alias: {
"@": resolve("src"), // 配置別名 @
'vue': path.resolve(__dirname, './', 'node_modules', 'vue') // 去重vue包,多個vue包會導致element-ui 里的 table 組件不生效
}
},
config.optimization = {
...config.minimizer,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 去除 console.log
drop_debugger: true, // 去除 debugger
},
},
}),
]
}
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new WebpackObfuscator({
// 壓縮代碼
compact: true,
// 是否啟用控制流扁平化(降低1.5倍的運行速度)
controlFlowFlattening: false,
// 隨機的死代碼塊(增加了混淆代碼的大小)
deadCodeInjection: false,
// 此選項幾乎不可能使用開發(fā)者工具的控制臺選項卡
debugProtection: false,
// 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，從而更難使用“開發(fā)人員工具”的其他功能。
debugProtectionInterval: false,
// 通過用空函數替換它們來禁用console.log，console.info，console.error和console.warn。這使得調試器的使用更加困難。
disableConsoleOutput: true,
// 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否啟用全局變量和函數名稱的混淆
renameGlobals: false,
// 通過固定和隨機（在代碼混淆時生成）的位置移動數組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數可以引起注意。
rotateStringArray: true,
// 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true;
selfDefending: true,
// 刪除字符串文字并將它們放在一個特殊的數組中
stringArray: true,
rotateUnicodeArray: true,
// stringArrayEncoding: 'base64',
stringArrayEncoding: ['base64'],
stringArrayThreshold: 0.75,
// 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
unicodeEscapeSequence: false,
// 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
transformObjectKeys: true,
})
)
}
},
}
js 混淆參考文檔: 使用 webpack-obfuscator 進行代碼混淆及報錯解決方案
chainWebpack
介紹
chainWebpack 是 Vue CLI 提供的一種更強大的方式來修改 Webpack 的配置。
與 configureWebpack 不同，chainWebpack 使用 Webpack Chain API，它允許你以一種聲明式的方式來修改 Webpack 配置
用法
chainWebpack 接收一個函數，該函數接收一個基于 Webpack Chain API 的鏈對象作為參數。
你可以使用這個鏈對象來修改 Webpack 的配置
常用配置示例
修改 HTML 插件的選項
config.plugin('html').tap(args => {
args[0].title = 'My App';
return args;
});** 修改模塊規(guī)則**
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
});去除 debugger 語句
config.when(process.env.NODE_ENV === 'production', config => {
config.optimization.minimize(true);
config.optimization.minimizer('terser').tap(args => {
args[0].terserOptions.compress.drop_debugger = true;
return args;
});
});注意事項
- 使用 chainWebpack 時，請確保你了解 Webpack Chain API 的使用方法。
- chainWebpack 和 configureWebpack 可以同時使用，它們會按照順序依次應用。
- 如果你需要對 Webpack 的配置進行更復雜的操作，chainWebpack 提供了更強大的 API 來修改配置。
詳細示例
const path = require("path");
module.exports = {
chainWebpack: (config) => {
// 修改 HTML 插件的選項
config.plugin('html').tap(args => {
args[0].title = 'My App';
return args;
});
// 修改模塊規(guī)則
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
});
// 去除 debugger
config.when(process.env.NODE_ENV === 'production', config => {
config.optimization.minimize(true);
config.optimization.minimizer('terser').tap(args => {
args[0].terserOptions.compress.drop_debugger = true;
return args;
});
});
// 添加別名
config.resolve.alias
.set('@components', resolve('src/components'))
.set('@assets', resolve('src/assets'));
// 添加額外的插件
config.plugin('define').tap(args => {
args[0]['process.env'].VUE_APP_VERSION = JSON.stringify(process.env.VUE_APP_VERSION || '');
return args;
});
// 修改輸出選項
config.output.filename('[name].[contenthash].js');
},
};
function resolve(dir) {
return path.join(__dirname, dir);
}總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue.js頁面驗證跳轉功能實現,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
利用vue+elementUI設置省市縣三級聯(lián)動下拉列表框的詳細過程
在做電商項目的時候需要添加修改收貨地址,如何實現三級聯(lián)動選取省市區(qū)地址困擾了我不少時間,這篇文章主要給大家介紹了關于利用vue+elementUI設置省市縣三級聯(lián)動下拉列表框的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue項目中Api的組織和返回數據處理的操作，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了如何使用Vue實現簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解下2023-11-11
這篇文章主要介紹了vue分類篩選filter方法的簡單實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue各種字符串拼接方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要為大家介紹了Vue編譯報錯內存溢出問題解決方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vee-validate vue 2.0自定義表單驗證的實例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關于element中el-autocomplete的常見用法的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用element具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
本文主要介紹了Vue路由組件通過props配置傳參的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06