chainWebpack方式
chainWebpack 链式操作 (高级) ，接下来所有的配置我都会在该选项中进行配置
4 规则rules的配置
关于rules的配置 ，我会分别从新增/修改进行介绍 。
4.1 rules的新增
在webpack中rules是module的配置项 ，而所有的配置的都是挂载到config下的 ，所以新增一个rule方式：
config.module
.rule(name)
.use(name)
.loader(loader)
.options(options)
案例：style-resources-loader来添加less全局变量
案例：svg-sprite-loader将svg图片以雪碧图的方式在项目中加载
module.exports = {
chainWebpack: (config) => {
// 通过 style-resources-loader 来添加less全局变量
const types = [vue-modules, vue, normal-modules, normal];
types.forEach(type => {
let rule = config.module.rule(less).oneOf(type)
rule.use(style-resource)
.loader(style-resources-loader)
.options({
patterns: [path.resolve(__dirname, ./lessVariates.less)]
});
});
// `svg-sprite-loader`: 将svg图片以雪碧图的方式在项目中加载
config.module
.rule(svg)
.test(/.svg$/) // 匹配svg文件
.include.add(resolve(src/svg)) // 主要匹配src/svg
.end()
.use(svg-sprite-loader)
.loader(svg-sprite-loader) // 使用的loader ，主要要npm该插件
.options({symbolId: svg-[name]}) // 参数配置
}
}
4.2 rules的修改
针对已经存在的rule, 如果需要修改它的参数, 可以使用tap方法：
config.module
.rule(name)
.use(name)
.tap(options => newOptions)
案例：修改url-loader的参数
module.exports = {
chainWebpack: (config) => {
// `url-loader`是webpack默认已经配置的 ，现在我们来修改它的参数
config.module.rule(images)
.use(url-loader)
.tap(options => ({
name: ./assets/images/[name].[ext],
quality: 85,
limit: 0,
esModule: false,
}))
}
}
5 插件plugins 的配置
关于plugins的配置 ，我会分别从新增/修改/删除进行介绍 。
5.1 plugins的新增
注意：这里WebpackPlugin不需要通过new WebpackPlugin()使用 。
config
.plugin(name)
.use(WebpackPlugin, args)
案例：新增hot-hash-webpack-plugin
const HotHashWebpackPlugin = require(hot-hash-webpack-plugin);
module.exports = {
chainWebpack: (config) => {
// 新增一个`hot-hash-webpack-plugin`
// 注意：这里use的时候不需要使用`new HotHashWebpackPlugin()`
config.plugin(hotHash)
.use(HotHashWebpackPlugin, [{ version: 1.0.0 }]);
}
}
5.2 plugins的修改
同理,plugin参数的修改也是通过tap去修改 。
config
.plugin(name)
.tap(args => newArgs)
案例：修改打包后css抽离后的filename及抽离所属目录
案例：删除console和debugger
const HotHashWebpackPlugin = require(hot-hash-webpack-plugin);
module.exports = {
chainWebpack: (config) => {
// 修改打包时css抽离后的filename及抽离所属目录
config.plugin(extract-css)
.tap(args => [{
filename: css/[name].[contenthash:8].css,
chunkFilename: css/[name].[contenthash:8].css
}]);
// 正式环境下 ，删除console和debugger
config.optimization
.minimize(true)
.minimizer(terser)
.tap(args => {
let { terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
}
}
5.3 plugins的删除
对于一些webpack默认的plugin ，如果不需要可以进行删除
config.plugins.delete(name)
案例：删除vue-cli3.X模块的自动分割抽离
module.exports = {
chainWebpack: (config) => {
// vue-cli3.X 会自动进行模块分割抽离 ，如果不需要进行分割,可以手动删除
config.optimization.delete(splitChunks);
}
}
6 一些常见的配置
6.1 修改enter文件
webpack默认的entry入口是scr/main.ts
config.entryPoints.clear(); // 清空默认入口
config.entry(test).add(getPath(./test/main.ts)); // 重新设置
6.2 DefinePlugin
定义全局全局变量 ，DefinePlugin是webpack已经默认配置的 ，我们可以对参数进行修改
config.plugin(define).tap(args => [{
...args,
"window.isDefine": JSON.stringify(true),
}]);
6.3 自定义filename 及 chunkFilename
自定义打包后js文件的路径及文件名字
config.output.filename(./js/[name].[chunkhash:8].js);
config.output.chunkFilename(./js/[name].[chunkhash:8].js);
6.4 修改html-webpack-plugin参数
html-webpack-plugin是webpack已经默认配置的 ，默认的源模版文件是public/index.html;我们可以对其参数进行修改
config.plugin(html)
.tap(options => [{
template: ../../index.html // 修改源模版文件
title: test,
}]);
6.5 设置别名alias
webpack默认是将src的别名设置为@, 此外 ，我们可以进行添加
config.resolve.alias
.set(@, resolve(src))
.set(api, resolve(src/apis))
.set(common, resolve(src/common))
7 附上一份我的vue.config.js的配置
const path = require(path);
const HotHashWebpackPlugin = require(hot-hash-webpack-plugin);
const WebpackBar = require(webpackbar);
const resolve = (dir) => path.join(__dirname, ., dir);
module.exports = {
productionSourceMap: false,
publicPath: ./,
outputDir: dist,
assetsDir: assets,
devServer: {
port: 9999,
host: 0.0.0.0,
https: false,
open: true
},
chainWebpack: (config) => {
const types = [vue-modules, vue, normal-modules, normal];
types.forEach(type => {
let rule = config.module.rule(less).oneOf(type)
rule.use(style-resource)
.loader(style-resources-loader)
.options({
patterns: [path.resolve(__dirname, ./lessVariates.less)]
});
});
config.resolve.alias
.set(@, resolve(src))
.set(api, resolve(src/apis))
.set(common, resolve(src/common))
config.module.rule(images).use(url-loader)
.tap(options => ({
name: ./assets/images/[name].[ext],
quality: 85,
limit: 0,
esModule: false,
}));
config.module.rule(svg)
.test(/.svg$/)
.include.add(resolve(src/svg))
.end()
.use(svg-sprite-loader)
.loader(svg-sprite-loader);
config.plugin(define).tap(args => [{
...args,
"window.isDefine": JSON.stringify(true)
}]);
// 生产环境配置
if (process.env.NODE_ENV === production) {
config.output.filename(./js/[name].[chunkhash:8].js);
config.output.chunkFilename(./js/[name].[chunkhash:8].js);
config.plugin(extract-css).tap(args => [{
filename: css/[name].[contenthash:8].css,
chunkFilename: css/[name].[contenthash:8].css
}]);
config.plugin(hotHash).use(HotHashWebpackPlugin, [{ version : 1.0.0}]);
config.plugin(webpackBar).use(WebpackBar);
config.optimization.minimize(true)
.minimizer(terser)
.tap(args => {
let { terserOptions } = args[0];
terserOptions.compress.drop_console = true;
terserOptions.compress.drop_debugger = true;
return args
});
config.optimization.splitChunks({
cacheGroups: {
common: {
name: common,
chunks: all,
minSize: 1,
minChunks: 2,
priority: 1
},
vendor: {
name: chunk-libs,
chunks: all,
test: /[\/]node_modules[\/]/,
priority: 10
}
}
});
}
}
}
本文转载于：
https://juejin.cn/post/7130784786343428110
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
