webpack-chainчто это такое?通过链式的方式修改webpack的配置.
Перечислены некоторые из способов, которыми я обычно использую webpack-chain для изменения конфигурации webpack.
//vue.config.js
module.exports={
chainWebpack:(webpackConfig)=>{
}
}
#1. Изменить ввод и вывод
chainWebpack: config => {
config.entryPoints.clear() // 会把默认的入口清空
config.entry('main').add('./src/main.js')//新增入口
config.entry('routes').add('./src/app-routes.js')//新增入口
config.output
.path("dist")
.filename("[name].[chunkhash].js")
.chunkFilename("chunks/[name].[chunkhash].js")
.libraryTarget("umd")
.library();
}
// 其余的output配置
config.output
.auxiliaryComment(auxiliaryComment)
.chunkFilename(chunkFilename)
.chunkLoadTimeout(chunkLoadTimeout)
.crossOriginLoading(crossOriginLoading)
.devtoolFallbackModuleFilenameTemplate(devtoolFallbackModuleFilenameTemplate)
.devtoolLineToLine(devtoolLineToLine)
.devtoolModuleFilenameTemplate(devtoolModuleFilenameTemplate)
.filename(filename)
.hashFunction(hashFunction)
.hashDigest(hashDigest)
.hashDigestLength(hashDigestLength)
.hashSalt(hashSalt)
.hotUpdateChunkFilename(hotUpdateChunkFilename)
.hotUpdateFunction(hotUpdateFunction)
.hotUpdateMainFilename(hotUpdateMainFilename)
.jsonpFunction(jsonpFunction)
.library(library)
.libraryExport(libraryExport)
.libraryTarget(libraryTarget)
.path(path)
.pathinfo(pathinfo)
.publicPath(publicPath)
.sourceMapFilename(sourceMapFilename)
.sourcePrefix(sourcePrefix)
.strictModuleExceptionHandling(strictModuleExceptionHandling)
.umdNamedDefine(umdNamedDefine)
#2. Установите псевдоним псевдонима
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: true,
chainWebpack: (config)=>{
config.resolve.alias
.set('@$', resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('layout',resolve('src/layout'))
.set('base',resolve('src/base'))
.set('static',resolve('src/static'))
.delete('base') // 删掉指定的别名
// .clear() 会把所有别名都删掉
}
}
#3. Изменить прокси прокси
Конфигурация devServe, см.здесь
chainWebpack: config => {
config.devServer.port(8888)
.open(true)
.proxy({'/dev': {
target: 'http://123.57.153.106:8080/',
changeOrigin: true,
pathRewrite: {
'^/dev': ''
}
}
})
}
// chain其他队proxy的配置
config.devServer
.bonjour(bonjour)
.clientLogLevel(clientLogLevel)
.color(color)
.compress(compress)
.contentBase(contentBase)
.disableHostCheck(disableHostCheck)
.filename(filename)
.headers(headers)
.historyApiFallback(historyApiFallback)
.host(host)
.hot(hot)
.hotOnly(hotOnly)
.https(https)
.inline(inline)
.info(info)
.lazy(lazy)
.noInfo(noInfo)
.open(open)
.openPage(openPage)
.overlay(overlay)
.pfx(pfx)
.pfxPassphrase(pfxPassphrase)
.port(port)
.progress(progress)
.proxy(proxy)
.public(public)
.publicPath(publicPath)
.quiet(quiet)
.setup(setup)
.socket(socket)
.staticOptions(staticOptions)
.stats(stats)
.stdin(stdin)
.useLocalIp(useLocalIp)
.watchContentBase(watchContentBase)
.watchOptions(watchOptions)
#4. Добавьте плагины и измените параметры плагина
Для конфигурации, связанной с плагином, см.здесь
Добавить плагин
// 添加API
config
.plugin(name)
.use(WebpackPlugin, args)
// 一个例子
const fileManager = require("filemanager-webpack-plugin");
...
//注意：use部分，不能使用new的方式创建插件实例
webpackConfig.plugin("zip").use(fileManager, [
{
onEnd: {
archive: [
{
source: "dist",
destination: zipName
}
]
}
}
]);
Изменить параметры плагина
// 可以使用tap方式，修改插件参数
config
.plugin(name)
.tap(args => newArgs)
// 一个例子
config
.plugin('env')
//使用tag修改参数
.tap(args => [...args, 'SECRET_KEY']);
#5. Измените инициализацию плагина и удалите плагины.
Изменить инициализацию плагина
config
.plugin(name)
.init((Plugin, args) => new Plugin(...args));
удалить плагин
chainWebpack: config => {
config.plugins.delete('prefetch')
// 移除 preload 插件
config.plugins.delete('preload');
}
#6. Позвонить/позвонить перед плагином ХХ
Иногда вам нужны плагины xx в плагинах aa之前передача.
config
.plugin(name)
.before(otherName)
// 一个例子：ScriptExtWebpackPlugin插件在HtmlWebpackTemplate插件前调用
config
.plugin('html-template')
.use(HtmlWebpackTemplate)
.end()
.plugin('script-ext')
.use(ScriptExtWebpackPlugin)
.before('html-template');
Иногда вам нужны плагины xx в плагинах aa之后передача.
config
.plugin(name)
.after(otherName)
// 一个例子html-template在script-ext之后调用
config
.plugin('html-template')
.after('script-ext')
.use(HtmlWebpackTemplate)
.end()
.plugin('script-ext')
.use(ScriptExtWebpackPlugin);
#7. Производительность
См. параметры веб-пакета для настройки:performance
config.performance
.hints(hints)//false | "error" | "warning"。打开/关闭提示
.maxEntrypointSize(maxEntrypointSize)//入口起点表示针对指定的入口，对于所有资源，要充分利用初始加载时(initial load time)期间。此选项根据入口起点的最大体积，控制 webpack 何时生成性能提示。默认值是：250000
.maxAssetSize(maxAssetSize)//资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积，控制 webpack 何时生成性能提示。默认值是：250000
.assetFilter(assetFilter)//此属性允许 webpack 控制用于计算性能提示的文件
#8. Сегментация кода и оптимизация производительности
- Введение в настройку оптимизации
- конфигурация разделения кода
- Сегментация кода splitChunk китайское введение
config.optimization
.concatenateModules(concatenateModules)
.flagIncludedChunks(flagIncludedChunks)
.mergeDuplicateChunks(mergeDuplicateChunks)
.minimize(minimize) //boolean，默认为true,是否开启压缩
.namedChunks(namedChunks)
.namedModules(namedModules)
.nodeEnv(nodeEnv)
.noEmitOnErrors(noEmitOnErrors)
.occurrenceOrder(occurrenceOrder)
.portableRecords(portableRecords)
.providedExports(providedExports)
.removeAvailableModules(removeAvailableModules)
.removeEmptyChunks(removeEmptyChunks)
.runtimeChunk(runtimeChunk)
.sideEffects(sideEffects)
.splitChunks(splitChunks)//object:代码分割。默认情况下，webpack v4 +为动态导入的模块提供了开箱即用的新通用块策略。
.usedExports(usedExports)
//举个例子
config.optimization.splitChunks({
chunks: "async", // 必须三选一： "initial" | "all"(推荐) | "async" (默认就是async)
minSize: 30000, // 最小尺寸，30000
minChunks: 1, // 最小 chunk ，默认1
maxAsyncRequests: 5, // 最大异步请求数， 默认5
maxInitialRequests : 3, // 最大初始化请求书，默认3
automaticNameDelimiter: '~',// 打包分隔符
name: function(){}, // 打包后的名称，此选项可接收 function
cacheGroups:{ // 这里开始设置缓存的 chunks
priority: 0, // 缓存组优先级
vendor: { // key 为entry中定义的 入口名称
chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是async)
test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
name: "vendor", // 要缓存的 分隔出来的 chunk 名称
minSize: 30000,
minChunks: 1,
enforce: true,
maxAsyncRequests: 5, // 最大异步请求数， 默认1
maxInitialRequests : 3, // 最大初始化请求书，默认1
reuseExistingChunk: true // 可设置是否重用该chunk
}
}
});
#9. Пользовательский инструмент сжатия кода
webpack4.x используется по умолчаниюTerserPluginДелайте сжатие кода.
//使用
config.optimization.minimizer.use(WebpackPlugin,args);
//删除
config.optimization.minimizers.delete(name)
// 一个例子
config.optimization
.minimizer('css')
.use(OptimizeCSSAssetsPlugin, [{ cssProcessorOptions: { safe: true } }])
// Minimizer plugins can also be specified by their path, allowing the expensive require()s to be
// skipped in cases where the plugin or webpack configuration won't end up being used.
config.optimization
.minimizer('css')
.use(require.resolve('optimize-css-assets-webpack-plugin'), [{ cssProcessorOptions: { safe: true } }])
//是要tap修改插件参数
config.optimization
.minimizer('css')
.tap(args => [...args, { cssProcessorOptions: { safe: false } }])
#10, добавить новый загрузчик
Прежде всего, поймите, как webpack настраивает загрузчик.Ссылка на официальный сайт
config.module
.rule(name)
.use(name)
.loader(loader)
.options(options)
// 一个例子
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
// 如果是非webpack-chain的话
module:{
rules:[
{
test:/\.graphql$/,
use::[
{
loader:"graphql-tag/loader"
}
]
}
]
}
#11. Изменить загрузчик
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}
УведомлениеДля загрузчиков, связанных с CSS, мы рекомендуем использовать
css.loaderOptionsВместо того, чтобы связывать загрузчик напрямую. Это связано с тем, что существует несколько правил для каждого типа файла CSS, а css.loaderOptions гарантирует, что вы можете изменить их все в одном месте.
#12. Заменить Loader в правиле
// vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
// 添加要替换的 loader
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
}
#13. Используйте when для условной конфигурации
consif.when(condition,truthyFunc,falsyFunc)
// 一个例子，当构建生产包时添加minify插件，否则设置构建类型为source-map
// devtool请见：https://www.webpackjs.com/configuration/devtool/
config
.when(process.env.NODE_ENV === 'production',
config => config.plugin('minify').use(BabiliWebpackPlugin),
config => config.devtool('source-map')
);
#14. Используйте toString() для просмотра конфигурации веб-пакета, соответствующей цепочке
УведомлениеиспользоватьtoString()Сгенерированные данные не могут быть напрямуюwebpackиспользовать на.
config
.module
.rule('compile')
.test(/\.js$/)
.use('babel')
.loader('babel-loader');
config.toString();
/*
{
module: {
rules: [
/* config.module.rule('compile') */
{
test: /\.js$/,
use: [
/* config.module.rule('compile').use('babel') */
{
loader: 'babel-loader'
}
]
}
]
}
}
*/
#Ссылаться на
Если вы считаете, что эта статья полезна для вас, добро пожаловать вStar: mrgaogang.github.io