configureWebpack

介绍

<code>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);

}