快捷導(dǎo)航

Vue?cli3?chainWepack使用方法示例詳解

更新時(shí)間：2023年11月09日 11:41:20 作者：程序員海軍

這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

loader

在項(xiàng)目開發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況，這就需要對(duì) loader 進(jìn)行配置。

定義

l o a d e r讓webpack能夠去處理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以將所有類型的文件轉(zhuǎn)換為webpack能夠處理的有效模塊，然后你就可以利用webpack的打包能力，對(duì)它們進(jìn)行處理。

本質(zhì)上，webpackloader將所有類型的文件，轉(zhuǎn)換為應(yīng)用程序的依賴圖（和最終的bundle）可以直接引用的模塊。

在webpack配置中定義loader時(shí)，要定義在module.rules中，而不是rules*。*

在配置文件中webpack.config.js加入module屬性，該屬性是一個(gè)對(duì)象,在這個(gè)屬性中有一個(gè)rules字段。

rules是一個(gè)數(shù)組，所有的loader配置都可以寫在這個(gè)數(shù)組里，每個(gè)loader配置是一個(gè)對(duì)象。

module:{
    rules:[{
      test:/.js$/,
      use:[{
        loader:'babel-loader',
        options: {
        presets: [
         "es2015", "react"
        ],
        plugins: ["syntax-dynamic-import"]
     }
      }]
    }]
  }

每個(gè) loader 對(duì)象配置屬性如下：

test ：test 是一個(gè) 正則表達(dá)式，用來匹配不同的類型文件
use： use 是一個(gè) 數(shù)組，里面存放使用的 loader 。當(dāng)匹配到文件后，將會(huì)按use 里面存放的 loader 去解析處理文件的內(nèi)容。

如果使用的是loader的默認(rèn)配置，可以寫use:'css-loader','style-loader'；

如果是需要用到額外配置則需要寫成對(duì)象，講配置寫在options里；

 use:[{
        loader:'babel-loader',
        options: {
          presets: [
           "es2015", "react"
          ],
          plugins: ["syntax-dynamic-import"]
     		}
   }]

使用這些loader 時(shí)，必須先安裝它們。

多環(huán)境切換 loader 配置

如果你需要基于環(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 {
   // 為開發(fā)環(huán)境修改配置...
  }
 }
}

使用 configureWebpack 簡(jiǎn)單配置

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

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

使用 chainWebpack 高級(jí)配置

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

它允許我們更細(xì)粒度的控制其內(nèi)部配置。

1. 修改loader

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

2. 添加新的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()
  }
}

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

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

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不這樣做，接下來的 loader 會(huì)附加在該規(guī)則現(xiàn)有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替換的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

4. 引用全局共用的樣式文件

module.exports = {
 // ...
 css: {
  loaderOptions: {
   sass: {
    // 根據(jù)自己樣式文件的位置調(diào)整
    data: `@import "@src/css/base.scss";`
   }
  }
 }
};

以上就是Vue cli3 chainWepack使用方法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue cli3 chainWepack使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: