configureWebpack
introduce
configureWebpackAllows you to directly modify the configuration of Webpack in the Vue CLI project.
It can be implemented by an object or a function.
If you are using a function, it will receive the default Webpack configuration as a parameter and you should return a modified configuration object.
usage
configureWebpack can be an object or a function:
As an object:
- If configureWebpack is an object, the object will be merged into the final Webpack configuration through webpack-merge.
- This method is suitable for simple configuration modifications.
As a function:
- If configureWebpack is a function, it will receive the default Webpack configuration as a parameter.
- Functions can modify configurations and return nothing, or they can return a cloned or modified configuration version.
- This approach is suitable for more complex configuration modifications, especially when you need to dynamically modify configurations based on environment variables or other conditions.
Common configuration examples
Add an alias
const path = require("path");
= {
configureWebpack: {
resolve: {
alias: {
'@': (__dirname, './src')
}
}
}
};Modify the output file name
= {
configureWebpack: {
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].'
}
}
};Add Webpack plugin
= {
configureWebpack: (config) => {
(
new HtmlWebpackPlugin({
template: './public/',
filename: '',
})
);
},
};Add an extra loader
= {
configureWebpack: {
module: {
rules: [
{
test: /\.md$/,
use: [
'vue-loader',
{
loader: 'markdown-loader',
options: {
// Options for markdown-loader }
}
]
}
]
}
}
};Modify performance tips
= {
configureWebpack: (config) => {
= {
hints: false, // Turn off performance prompts maxEntrypointSize: 500000,
maxAssetSize: 300000,
};
},
};Modify optimization options
= {
configureWebpack: (config) => {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // Remove console drop_debugger: true, // Remove debugger },
},
}),
],
},
},
};Example
Object Form:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
function resolve(dir) {
return (__dirname, dir);
}
const name = 'Browser web title';
= {
configureWebpack: (.NODE_ENV === 'production') ? {
name: name,
plugins: [
new WebpackObfuscator({ // js obfuscated configuration controlFlowFlattening: false,
deadCodeInjection: false,
ignoreImports: true, // Set to true here stringArrayThreshold: 0.3,
// Compress code compact: true,
// Whether to enable control flow flattening (reduce running speed by 1.5 times) controlFlowFlattening: false,
// Random dead code blocks (increased the size of obfuscated code) deadCodeInjection: false,
// This option is nearly impossible to use the Developer Tools console tab debugProtection: false,
// If selected, interval forced debug mode is used on the Console tab, making it harder to use other features of Developer Tools. debugProtectionInterval: false,
// Disable, , and by replacing them with empty functions. This makes use of the debugger more difficult. disableConsoleOutput: true,
// Identifier obfuscation method hexadecimal (hexadecimal) mangled (short identifier) identifierNamesGenerator: 'hexadecimal',
log: false,
// Whether to enable confusion between global variables and function names renameGlobals: false,
// Move the array through fixed and random (generated when code obfuscated). This makes matching the order of deleted strings to their original position even more difficult. If the original source code is not small, it is recommended to use this option because helper functions can attract attention. rotateStringArray: true,
// The obfuscated code cannot be beautified using code, and cpmpat:true is required; selfDefending: true,
// Delete string literals and place them in a special array stringArray: true,
rotateUnicodeArray: true,
// stringArrayEncoding: 'base64',
stringArrayEncoding: ['base64'],
stringArrayThreshold: 0.75,
// Allows to enable/disable string conversion to unicode escape sequences. Unicode escape sequences greatly increase the code size and can easily restore strings to original views. It is recommended to enable this option only for small source code. unicodeEscapeSequence: false,
// Allows to enable/disable string conversion to unicode escape sequences. Unicode escape sequences greatly increase the code size and can easily restore strings to original views. It is recommended to enable this option only for small source code. transformObjectKeys: true,
}, []),
],
devtool: .NODE_ENV === "production" ? "false" : "source-map",
resolve: {
alias: {
"@": resolve("src"), // Add an alias @ 'vue': (__dirname, './', 'node_modules', 'vue') // Deduplication of vue packages, multiple vue packages will cause the table component in element-ui to not take effect },
},
// Filter and print logs when packaging production environment optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // Remove console drop_debugger: true, // Remove debugger },
},
}),
],
},
} : {},
}Function form:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
function resolve(dir) {
return (__dirname, dir);
}
const name = 'Browser web title';
= {
configureWebpack: (config) => {
= name,
= {
...,
alias: {
"@": resolve("src"), //Configuration alias @ 'vue': (__dirname, './', 'node_modules', 'vue') // Deduplication of vue packages, multiple vue packages will cause the table component in element-ui to not take effect }
},
= {
...,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // Remove drop_debugger: true, // Remove debugger },
},
}),
]
}
if (.NODE_ENV === 'production') {
(
new WebpackObfuscator({
// Compress code compact: true,
// Whether to enable control flow flattening (reduce running speed by 1.5 times) controlFlowFlattening: false,
// Random dead code blocks (increased the size of obfuscated code) deadCodeInjection: false,
// This option is nearly impossible to use the Developer Tools console tab debugProtection: false,
// If selected, interval forced debug mode is used on the Console tab, making it harder to use other features of Developer Tools. debugProtectionInterval: false,
// Disable, , and by replacing them with empty functions. This makes use of the debugger more difficult. disableConsoleOutput: true,
// Identifier obfuscation method hexadecimal (hexadecimal) mangled (short identifier) identifierNamesGenerator: 'hexadecimal',
log: false,
// Whether to enable confusion between global variables and function names renameGlobals: false,
// Move the array through fixed and random (generated when code obfuscated). This makes matching the order of deleted strings to their original position even more difficult. If the original source code is not small, it is recommended to use this option because helper functions can attract attention. rotateStringArray: true,
// The obfuscated code cannot be beautified using code, and cpmpat:true is required; selfDefending: true,
// Delete string literals and place them in a special array stringArray: true,
rotateUnicodeArray: true,
// stringArrayEncoding: 'base64',
stringArrayEncoding: ['base64'],
stringArrayThreshold: 0.75,
// Allows to enable/disable string conversion to unicode escape sequences. Unicode escape sequences greatly increase the code size and can easily restore strings to original views. It is recommended to enable this option only for small source code. unicodeEscapeSequence: false,
// Allows to enable/disable string conversion to unicode escape sequences. Unicode escape sequences greatly increase the code size and can easily restore strings to original views. It is recommended to enable this option only for small source code. transformObjectKeys: true,
})
)
}
},
}
js obfuscation reference documentation:Use webpack-obfuscator for code obfuscation and error reporting solutions
chainWebpack
introduce
chainWebpackIt is a more powerful way to modify the configuration of Webpack by Vue CLI.
andconfigureWebpackdifferent,chainWebpackUse the Webpack Chain API, which allows you to modify Webpack configurations in a declarative way
usage
chainWebpack receives a function that receives a chain object based on the Webpack Chain API as a parameter.
You can use this chain object to modify the configuration of Webpack
Common configuration examples
Modify HTML plug-in options
('html').tap(args => {
args[0].title = 'My App';
return args;
});** Modify module rules**
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
});Remove debugger statement
(.NODE_ENV === 'production', config => {
(true);
('terser').tap(args => {
args[0]..drop_debugger = true;
return args;
});
});Things to note
- When using chainWebpack, make sure you understand how to use the Webpack Chain API.
- chainWebpack and configureWebpack can be used at the same time, and they will be applied in sequence.
- If you need to perform more complex operations on the configuration of Webpack, chainWebpack provides a more powerful API to modify the configuration.
Detailed examples
const path = require("path");
= {
chainWebpack: (config) => {
// Modify HTML plug-in options ('html').tap(args => {
args[0].title = 'My App';
return args;
});
// Modify module rules
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
});
// Remove debugger (.NODE_ENV === 'production', config => {
(true);
('terser').tap(args => {
args[0]..drop_debugger = true;
return args;
});
});
// Add an alias
.set('@components', resolve('src/components'))
.set('@assets', resolve('src/assets'));
// Add extra plugins ('define').tap(args => {
args[0][''].VUE_APP_VERSION = (.VUE_APP_VERSION || '');
return args;
});
// Modify output options ('[name].[contenthash].js');
},
};
function resolve(dir) {
return (__dirname, dir);
}Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.