vue.config.js中设置configureWebpack和chainWebpack以及一些常用的设置

2024-11-2 22:31| 发布者: c2688| 查看: 50| 评论: 0

摘要: 目次configureWebpack先容用法常见设置示例示例chainWebpack先容用法常用设置示例注意事项详细示例总结configureWebpack 先容 [code]configureWebpack[/code] 允许你在 Vue CLI 项目中直接修改 Webpack 的设置。它

configureWebpack

先容

[code]configureWebpack[/code] 允许你在 Vue CLI 项目中直接修改 Webpack 的设置。

它可以通过一个对象或一个函数来实现。

如果你使用的是一个函数，那么它会汲取默认的 Webpack 设置作为参数，而且你应该返回一个修改过的设置对象。

用法

configureWebpack 可以是一个对象或一个函数：

作为对象：

如果 configureWebpack 是一个对象，那么这个对象将会通过 webpack-merge 合并到终极的 Webpack 设置中。
这种方式适合简单的设置修改。

作为函数：

如果 configureWebpack 是一个函数，那么它会汲取默认的 Webpack 设置作为参数。
函数可以修改设置并不返回任何东西，也可以返回一个被克隆或修改过的设置版本。
这种方式适合更复杂的设置修改，特别是当你需要基于环境变量或其他条件动态修改设置时。

常见设置示例

添加别名

[code]const path = require("path"); module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, './src') } } } };[/code]

修改输出文件名

[code]module.exports = { configureWebpack: { output: { filename: '[name].[contenthash].js', chunkFilename: '[name].[contenthash].chunk.js' } } };[/code]

添加 Webpack 插件

[code]module.exports = { configureWebpack: (config) => { config.plugins.push( new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', }) ); }, };[/code]

添加额外的 Loader

[code]module.exports = { configureWebpack: { module: { rules: [ { test: /\.md$/, use: [ 'vue-loader', { loader: 'markdown-loader', options: { // markdown-loader 的选项 } } ] } ] } } };[/code]

修改性能提示

[code]module.exports = { configureWebpack: (config) => { config.performance = { hints: false, // 关闭性能提示 maxEntrypointSize: 500000, maxAssetSize: 300000, }; }, };[/code]

修改优化选项

[code]module.exports = { configureWebpack: (config) => { optimization: { minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: true, // 去除 console drop_debugger: true, // 去除 debugger }, }, }), ], }, }, };[/code]

示例

对象情势:

[code]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 }, }, }), ], }, } : {}, }[/code]

函数情势:

[code]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, }) ) } }, } [/code]

js 混淆参考文档: 使用 webpack-obfuscator 进行代码混淆及报错办理方案

chainWebpack

先容

[code]chainWebpack[/code] 是 Vue CLI 提供的一种更强大的方式来修改 Webpack 的设置。

与 [code]configureWebpack[/code] 差别，[code]chainWebpack[/code] 使用 Webpack Chain API，它允许你以一种声明式的方式来修改 Webpack 设置

用法

chainWebpack 汲取一个函数，该函数汲取一个基于 Webpack Chain API 的链对象作为参数。

你可以使用这个链对象来修改 Webpack 的设置

常用设置示例

修改 HTML 插件的选项

[code]config.plugin('html').tap(args => { args[0].title = 'My App'; return args; });[/code]

** 修改模块规则**

[code]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]' });[/code]

去除 debugger 语句

[code]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; }); });[/code]

注意事项

使用 chainWebpack 时，请确保你相识 Webpack Chain API 的使用方法。
chainWebpack 和 configureWebpack 可以同时使用，它们会按照顺序依次应用。
如果你需要对 Webpack 的设置进行更复杂的操纵，chainWebpack 提供了更强大的 API 来修改设置。

详细示例

[code]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); }[/code]

总结

以上为个人经验，希望能给各人一个参考，也希望各人多多支持脚本之家。

来源：https://www.jb51.net/javascript/328514kis.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：使用webpack-obfuscator举行代码肴杂及报错解决过程下一篇：vue中的keep-alive用法指南

账号		自动登录	找回密码
密码			立即注册