webpack-chain

一、修改entry和output

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)

二、设置别名alias

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()  会把全部别名都删掉}
}

三、修改代理proxy

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)

四、添加插件及修改插件参数

插件相关配置请见这里vue

添加插件node

// 添加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}]}}]);

修改插件参数react

// 可使用tap方式，修改插件参数
config.plugin(name).tap(args => newArgs)// 一个例子
config.plugin('env')//使用tag修改参数.tap(args => [...args, 'SECRET_KEY']);

五、修改插件初始化及移除插件

修改插件初始化webpack

config.plugin(name).init((Plugin, args) => new Plugin(...args));

移除插件git

 chainWebpack: config => {config.plugins.delete('prefetch')// 移除 preload 插件config.plugins.delete('preload');}

六、在xx插件前调用/在xx插件以后调用

有时候须要xx插件在aa插件以前调用。github

config.plugin(name).before(otherName)// 一个例子：ScriptExtWebpackPlugin插件在HtmlWebpackTemplate插件前调用config.plugin('html-template').use(HtmlWebpackTemplate).end().plugin('script-ext').use(ScriptExtWebpackPlugin).before('html-template');

有时候须要xx插件在aa插件以后调用。web

config.plugin(name).after(otherName)// 一个例子html-template在script-ext以后调用config.plugin('html-template').after('script-ext').use(HtmlWebpackTemplate).end().plugin('script-ext').use(ScriptExtWebpackPlugin);

七、performance 性能

配置请见webpack参数:performance

config.performance.hints(hints)//false | "error" | "warning"。打开/关闭提示.maxEntrypointSize(maxEntrypointSize)//入口起点表示针对指定的入口，对于全部资源，要充分利用初始加载时(initial load time)期间。此选项根据入口起点的最大致积，控制 webpack 什么时候生成性能提示。默认值是：250000.maxAssetSize(maxAssetSize)//资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积，控制 webpack 什么时候生成性能提示。默认值是：250000.assetFilter(assetFilter)//此属性容许 webpack 控制用于计算性能提示的文件

八、代码分割及性能优化 optimizations

optimizations配置介绍
代码分割配置
代码分割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, // 最小尺寸，30000minChunks: 1, // 最小 chunk ，默认1maxAsyncRequests: 5, // 最大异步请求数， 默认5maxInitialRequests : 3, // 最大初始化请求书，默认3automaticNameDelimiter: '~',// 打包分隔符name: function(){}, // 打包后的名称，此选项可接收 functioncacheGroups:{ // 这里开始设置缓存的 chunkspriority: 0, // 缓存组优先级vendor: { // key 为entry中定义的 入口名称chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是async) test: /react|lodash/, // 正则规则验证，若是符合就提取 chunkname: "vendor", // 要缓存的 分隔出来的 chunk 名称 minSize: 30000,minChunks: 1,enforce: true,maxAsyncRequests: 5, // 最大异步请求数， 默认1maxInitialRequests : 3, // 最大初始化请求书，默认1reuseExistingChunk: true // 可设置是否重用该chunk}}
});

九、自定义代码压缩工具

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 } }])

十、添加一个新的 Loader

首先请先了解一下webpack如何配置loader. 官网连接

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"}]}]
}

十一、修改Loader

// vue.config.js
module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {// 修改它的选项...return options})}
}

注意对于 CSS 相关 loader 来讲，咱们推荐使用 css.loaderOptions 而不是直接链式指定 loader。这是由于每种 CSS 文件类型都有多个规则，而 css.loaderOptions 能够确保你经过一个地方影响全部的规则。

十二、替换一个规则里的 Loader

// vue.config.js
module.exports = {chainWebpack: config => {const svgRule = config.module.rule('svg')// 清除已有的全部 loader。// 若是你不这样作，接下来的 loader 会附加在该规则现有的 loader 以后。svgRule.uses.clear()// 添加要替换的 loadersvgRule.use('vue-svg-loader').loader('vue-svg-loader')}
}

十三、使用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'));

十四、使用toString()查看chain对应的webpack配置

注意使用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'}]}]}
}
*/

webpack-chain相关推荐

ElementUI 组件库 md-loader 的解析和优化
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步. 背景相信很多同学在学习 webpack 的时候,对 load ...
乾坤微前端_最全汇总之微前端知识和实战（EMP技术方案）
我们团队在早早聊的B站直播间分享了EMP微前端---团队半年以来的技术果实.分享的内容全在这里,会讲述微前端的由来,解决的问题,以及EMP微前端方案的不同之处,更有四个实战项目的总结,欢迎大家一起探讨 ...
java里emp是什么_EMP微前端分享内容回顾（中）
我们团队在早早聊的B站直播间分享了EMP微前端,内容比较丰富,分为三篇文章阐述,欢迎关注EMP库后续. 这篇文章主要讲EMP的是生态搭建和使用体验. 继上一篇 EMP微前端分享内容回顾(上) 生态打造 ...
小程序打包体积过大的解决方案
一背景分包是小程序给出的类似于web异步引入的一个方案,把一些初始进入时不需要的页面放到分包里,跳转到对应页面时再去下载分包,从而有效减少主包体积. 项目背景: 公司的小程序项目使用taro来实现 ...
京东快递小程序分包优化实践
前言- 随着项目规模增大,小程序分包优化是必须要面对的问题.分包不合理,不仅影响项目迭代和上线计划,还关乎用户体验,甚至因此导致 C 端用户流失.本文主要介绍京东快递小程序分包过程中踩过的坑,以及小程 ...
[译]开始学习webpack
写在前面: 文章翻译自petehunt大神的petehunt/webpack-howto,作为学习webpack的开始.fork了一份,翻译后的在这里https://github.com/zjzhom ...
帮你学会webpack
内容偏长,建议先码后看 webpack 入口起点(entry points) 单个入口(简写)语法对象语法常见场景分离应用程序(app) 和第三方库(vendor) 入口多页面应用程序输 ...
Substrate Tutorials：Create Your First Substrate Chain (single-node)
https://substrate.dev/docs/en/knowledgebase/getting-started/ https://substrate.dev/docs/en/tutorials ...
hmr webpack 不编译_Webpack的HMR原理分析
Webpack的HMR原理分析 module.exports = { entry : { main : './src/main.js', home : './src/home.js', common ...
hmr webpack 不编译_webpack - hmr热更新
文章首发于个人blog,欢迎关注~ webpack hmr webpack-dev-server 在使用 webpack-dev-server 的过程中,如果指定了 hot 配置的话(使用 inlin ...

webpack-chain

webpack-chain

一、修改entry和output

二、设置别名alias

三、修改代理proxy

四、添加插件及修改插件参数

五、修改插件初始化及移除插件

六、在xx插件前调用/在xx插件以后调用

七、performance 性能

八、代码分割及性能优化 optimizations

九、自定义代码压缩工具

十、添加一个新的 Loader

十一、修改Loader

十二、替换一个规则里的 Loader

十三、使用when作条件配置

十四、使用toString()查看chain对应的webpack配置

webpack-chain相关推荐

最新文章

热门文章

webpack-chain

webpack-chain

一、修改entry和output

二、设置别名alias

三、修改代理proxy

四、添加插件及修改插件参数

五、修改插件初始化及移除插件

六、在xx插件前调用/在xx插件以后调用

七、performance 性能

八、代码分割及性能优化 optimizations

九、自定义代码压缩工具

十、添加一个新的 Loader

十一、 修改Loader

十二、 替换一个规则里的 Loader

十三、使用when作条件配置

十四、使用toString()查看chain对应的webpack配置

webpack-chain相关推荐

最新文章

热门文章

十一、修改Loader

十二、替换一个规则里的 Loader