Vue CLI webpack 相關(guān)

簡(jiǎn)單的配置方式

調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js 中的 configureWebpack 選項(xiàng)提供一個(gè)對(duì)象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。

警告

有些 webpack 選項(xiàng)是基于 vue.config.js 中的值設(shè)置的，所以不能直接修改。例如你應(yīng)該修改 vue.config.js 中的 outputDir 選項(xiàng)而不是修改 output.path；你應(yīng)該修改 vue.config.js 中的 publicPath 選項(xiàng)而不是修改 output.publicPath。這樣做是因?yàn)?nbsp;vue.config.js 中的值會(huì)被用在配置里的多個(gè)地方，以確保所有的部分都能正常工作在一起。

如果你需要基于環(huán)境有條件地配置行為，或者想要直接修改配置，那就換成一個(gè)函數(shù) (該函數(shù)會(huì)在環(huán)境變量被設(shè)置之后懶執(zhí)行)。該方法的第一個(gè)參數(shù)會(huì)收到已經(jīng)解析好的配置。在函數(shù)內(nèi)，你可以直接修改配置，或者返回一個(gè)將會(huì)被合并的對(duì)象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產(chǎn)環(huán)境修改配置...
    } else {
      // 為開(kāi)發(fā)環(huán)境修改配置...
    }
  }
}

鏈?zhǔn)讲僮?(高級(jí))

Vue CLI 內(nèi)部的 webpack 配置是通過(guò) webpack-chain 維護(hù)的。這個(gè)庫(kù)提供了一個(gè) webpack 原始配置的上層抽象，使其可以定義具名的 loader 規(guī)則和具名插件，并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對(duì)它們的選項(xiàng)進(jìn)行修改。

它允許我們更細(xì)粒度的控制其內(nèi)部配置。接下來(lái)有一些常見(jiàn)的在 vue.config.js 中的 chainWebpack 修改的例子。

提示

當(dāng)你打算鏈?zhǔn)皆L問(wèn)特定的 loader 時(shí)，vue inspect 會(huì)非常有幫助。

修改 Loader 選項(xiàng)

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的選項(xiàng)...
          return options
        })
  }
}

提示

對(duì)于 CSS 相關(guān) loader 來(lái)說(shuō)，我們推薦使用 css.loaderOptions 而不是直接鏈?zhǔn)街付?loader。這是因?yàn)槊糠N CSS 文件類(lèi)型都有多個(gè)規(guī)則，而 css.loaderOptions 可以確保你通過(guò)一個(gè)地方影響所有的規(guī)則。

添加一個(gè)新的 Loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你還可以再添加一個(gè) loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

替換一個(gè)規(guī)則里的 Loader

如果你想要替換一個(gè)已有的基礎(chǔ) loader，例如為內(nèi)聯(lián)的 SVG 文件使用 vue-svg-loader 而不是加載這個(gè)文件：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不這樣做，接下來(lái)的 loader 會(huì)附加在該規(guī)則現(xiàn)有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替換的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

修改插件選項(xiàng)

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 傳遞給 html-webpack-plugin's 構(gòu)造函數(shù)的新參數(shù) */]
      })
  }
}

你需要熟悉 webpack-chain 的 API 并閱讀一些源碼以便了解如何最大程度利用好這個(gè)選項(xiàng)，但是比起直接修改 webpack 配置，它的表達(dá)能力更強(qiáng)，也更為安全。

比方說(shuō)你想要將 index.html 默認(rèn)的路徑從 /Users/username/proj/public/index.html 改為 /Users/username/proj/app/templates/index.html。通過(guò)參考 html-webpack-plugin 你能看到一個(gè)可以傳入的選項(xiàng)列表。我們可以在下列配置中傳入一個(gè)新的模板路徑來(lái)改變它：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args
      })
  }
}

你可以通過(guò)接下來(lái)要討論的工具 vue inspect 來(lái)確認(rèn)變更。

審查項(xiàng)目的 webpack 配置

因?yàn)?nbsp;@vue/cli-service 對(duì) webpack 配置進(jìn)行了抽象，所以理解配置中包含的東西會(huì)比較困難，尤其是當(dāng)你打算自行對(duì)其調(diào)整的時(shí)候。

vue-cli-service 暴露了 inspect 命令用于審查解析好的 webpack 配置。那個(gè)全局的 vue 可執(zhí)行程序同樣提供了 inspect 命令，這個(gè)命令只是簡(jiǎn)單的把 vue-cli-service inspect 代理到了你的項(xiàng)目中。

該命令會(huì)將解析出來(lái)的 webpack 配置、包括鏈?zhǔn)皆L問(wèn)規(guī)則和插件的提示打印到 stdout。

你可以將其輸出重定向到一個(gè)文件以便進(jìn)行查閱：

vue inspect > output.js

注意它輸出的并不是一個(gè)有效的 webpack 配置文件，而是一個(gè)用于審查的被序列化的格式。

你也可以通過(guò)指定一個(gè)路徑來(lái)審查配置的一小部分：

# 只審查第一條規(guī)則
vue inspect module.rules.0

或者指向一個(gè)規(guī)則或插件的名字：

vue inspect --rule vue
vue inspect --plugin html

最后，你可以列出所有規(guī)則和插件的名字：

vue inspect --rules
vue inspect --plugins

以一個(gè)文件的方式使用解析好的配置

有些外部工具可能需要通過(guò)一個(gè)文件訪問(wèn)解析好的 webpack 配置，比如那些需要提供 webpack 配置路徑的 IDE 或 CLI。在這種情況下你可以使用如下路徑：

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

該文件會(huì)動(dòng)態(tài)解析并輸出 vue-cli-service 命令中使用的相同的 webpack 配置，包括那些來(lái)自插件甚至是你自定義的配置。