vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
更新时间：2024年10月10日 10:05:41 作者：你不讲 wood
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通过对象或函数修改配置,简单直接；chainWebpack则使用WebpackChainAPI,适合复杂配置,两者可以结合使用,以达到更精细的配置需求,帮助开发者优化项目构建
configureWebpack
介绍
configureWebpack 允许你在 Vue CLI 项目中直接修改 Webpack 的配置。
它可以通过一个对象或一个函数来实现。
如果你使用的是一个函数，那么它会接收默认的 Webpack 配置作为参数，并且你应该返回一个修改过的配置对象。
用法
configureWebpack 可以是一个对象或一个函数：
作为对象：
- 如果 configureWebpack 是一个对象，那么这个对象将会通过 webpack-merge 合并到最终的 Webpack 配置中。
- 这种方式适合简单的配置修改。
作为函数：
- 如果 configureWebpack 是一个函数，那么它会接收默认的 Webpack 配置作为参数。
- 函数可以修改配置并不返回任何东西，也可以返回一个被克隆或修改过的配置版本。
- 这种方式适合更复杂的配置修改，特别是当你需要基于环境变量或其他条件动态修改配置时。
常见配置示例
添加别名
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,
};
},
};修改优化选项
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,
// 此选项几乎不可能使用开发者工具的控制台选项卡
debugProtection: false,
// 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
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 组件不生效
},
},
// 打包生产环境时过滤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,
// 此选项几乎不可能使用开发者工具的控制台选项卡
debugProtection: false,
// 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
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;
});** 修改模块规则**
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;
});
// 修改模块规则
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);
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
漏斗图常用于可视化业务流程中的各个阶段的转换率,例如销售漏斗或营销漏斗,它可以帮助用户识别流程中的瓶颈和改进机会,本文给大家介绍了如何使用Vue3和Plotly.js绘制交互式漏斗图,,文中有相关代码示例供大家参考,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue.js 实现输入框动态添加功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
本篇文章主要介绍了vue2组件之select2调用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue 代码高亮插件全面对比测评的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了Vue中实现过渡动画效果示例代码,Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果，需要的朋友可以参考下2022-08-08
本文主要介绍了ue-admin-template动态路由的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要给大家介绍了关于vue实现手机号码的校验的相关资料，主要是防抖函数的应用场景，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章介绍了在Linux服务器上部署vue项目的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
vue v-viewer组件使用示例详解(v-viewer轮播图)
这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
vxe-table 实现 excel 选择一个单元格拖拽自动复制新的单元格(示例代码)
vxe-table是一款强大的表格组件,支持Excel风格的操作,通过鼠标右下角的扩展按钮,用户可以拖拽选择单元格并自动复制内容到扩展区域的所有单元格中,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01
最新评论