vuepress 有三套 webpack 配置:基礎配置、dev 配置、build 配置,看似和普通的一個前端項目也沒什麼差異,但它使用 webpack-chain 生成配置而不是傳統的寫死配置。css
相關源碼見 createBaseConfig.js、createClientConfig、createServerConfig。前端
引入 webpack-chain 後,咱們全部的 webpack 配置經過一個鏈式包裝器即可生成了:vue
const Config = require('webpack-chain');
const config = new Config();
// 鏈式生成配置
...
// 導出 webpack 配置對象
export default config.toConfig();
複製代碼
在引入詳細的示例以前,先讓咱們介紹一下 webpack-chain 中內置的兩種數據結構:ChainMap、ChainSet。webpack
帶鏈式方法的集合。git
很顯然,它和 ES6 的 Set 相似,都擁有鍵值對,但值得一提的是:它經過鏈式方法來操做。github
在 webpack-chain 中,屬於 ChainedSet 的有 config.entry(name)
、config.resolve.modules
等。web
假如咱們須要指定 webpack 配置的 enrty,咱們只須要這樣作:npm
config
.entry('app')
.add('src/index.js')
複製代碼
它等價於 webpack 配置對象的這部分:sass
entry: {
app: './src/index.js'
}
複製代碼
固然,我想強調的 ChainedSet 真正強大的地方,在於 ChainedSet 提供的內置方法:add(value)、delete(value)、has(value) 等。bash
這能夠幫助咱們增刪改查整個 webpack 配置中的任意一個部分。
帶鏈式方法的哈希表。
同上,它和 ES6 的 Map 相似,也經過鏈式方法來操做。
在 webpack-chain 中,屬於 ChainedMap 的有 config
、config.resolve
等。
想了解更多 API 用法的讀者能夠前往文檔。
咱們打開源碼目錄:
一共有三種類:Chainable、ChainedSet 或 ChainedMap、其它。
Chainable 實現了鏈式調用的功能,它的代碼很簡潔:
module.exports = class {
constructor(parent) {
this.parent = parent;
}
batch(handler) {
handler(this);
return this;
}
end() {
return this.parent;
}
};
複製代碼
最常調用的 end 方法即是來源於這了,它會返回調用鏈中最前端的那個對象。
好比說,咱們在 vuepress 中有這樣一段代碼:
config
.use('cache-loader')
.loader('cache-loader')
.options({
cacheDirectory,
cacheIdentifier
})
.end()
.use('babel-loader')
.loader('babel-loader')
.options({
// do not pick local project babel config
babelrc: false,
presets: [
require.resolve('@vue/babel-preset-app')
]
})
複製代碼
第八行結尾 end() 處返回的便又是 config
了。
ChainedSet 和 ChainedMap 都繼承於 Chainable,其餘類大多都繼承於 ChainedSet 或 ChainedMap,除了 Use 和 Plugin 類使用 Orderable 這個高階函數包裝了一下(至關於裝飾器),目的在於解決在使用 module.use 或 plugin 時調整順序的問題。有興趣的讀者能夠自行翻閱源碼~
分紅三個配置咱們就不贅述了,畢竟你們日常開發的項目中也可能這樣作。在這裏我須要特別提一下的地方即是編寫函數生成 webpack 配置:
舉個例子,在 createBaseConfig 裏,有一個這樣的函數:
function createCSSRule (lang, test, loader, options) {
const baseRule = config.module.rule(lang).test(test)
const modulesRule = baseRule.oneOf('modules').resourceQuery(/module/)
const normalRule = baseRule.oneOf('normal')
applyLoaders(modulesRule, true)
applyLoaders(normalRule, false)
function applyLoaders (rule, modules) {
if (!isServer) {
if (isProd) {
rule.use('extract-css-loader').loader(CSSExtractPlugin.loader)
} else {
rule.use('vue-style-loader').loader('vue-style-loader')
}
}
rule.use('css-loader')
.loader(isServer ? 'css-loader/locals' : 'css-loader')
.options({
modules,
localIdentName: `[local]_[hash:base64:8]`,
importLoaders: 1,
sourceMap: !isProd
})
rule.use('postcss-loader').loader('postcss-loader').options(Object.assign({
plugins: [require('autoprefixer')],
sourceMap: !isProd
}, siteConfig.postcss))
if (loader) {
rule.use(loader).loader(loader).options(options)
}
}
}
複製代碼
它作了這樣一件事:對特定的一種樣式語言進行 css 模塊化和非模塊化的處理,順序是 loader -> postcss-loader -> css-loader -> vue-style-loader 或 extract-css-loader。 使用方式是這樣的:
createCSSRule('css', /\.css$/)
createCSSRule('postcss', /\.p(ost)?css$/)
createCSSRule('scss', /\.scss$/, 'sass-loader', siteConfig.scss)
createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign({ indentedSyntax: true }, siteConfig.sass))
createCSSRule('less', /\.less$/, 'less-loader', siteConfig.less)
createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', Object.assign({
preferPathResolver: 'webpack'
}, siteConfig.stylus))
複製代碼
是否是一下減小了配置的編寫量?並且還很靈活的支持用戶自定義 options 和後期的代碼變動。
何時應該使用 webpack-chain 呢?畢竟它的引入增長了項目的成本,個人答案是: