本篇文章給大家分享的是有關(guān)如何在vue-cli中使用chainWebpack，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

王屋ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

1、首先簡單介紹一下webpack中l(wèi)oader的簡單使用：

loader：是webpack用來預(yù)處理模塊的，在一個模塊被引入之前，會預(yù)先使用loader處理模塊的內(nèi)容，在你打包的時候?qū)δ承﹥?nèi)容需要loader來處理一下，比如css模塊；默認webpack只會處理js代碼，所以當(dāng)我們想要去打包其他內(nèi)容時，就需要相應(yīng)的loader去處理某些內(nèi)容

使用方法：

在配置文件中webpack.config.js加入module屬性，該屬性是一個對象,在這個屬性中有一個rules字段，先上代碼

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

rules是一個數(shù)組，你所有的loader配置都可以寫在這個數(shù)組里，每個loader配置是一個對象，匹配不同的規(guī)則；

test:test后是一個正則表達式，匹配不同的文件類型;

use:在這個規(guī)則中，當(dāng)你匹配了這個文件后，需要使用相應(yīng)的loader去處理這類型的文件，use接收的是一個數(shù)組，意味著當(dāng)他匹配到文件后，它可以啟用很多的loader去處理文件的內(nèi)容；

如果使用的是loader的默認配置，可以寫use:['css-loader','style-loader']；

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

當(dāng)然，還會有其他的一些屬性比如（exclude、include等），這里就不再詳細贅述

在你使用這些loader之前需要用npm去安裝這些包；

2、用configureWebpack簡單的配置；

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

該對象將會被 webpack-merge 合并入最終的 webpack 配置。

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

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

3、用chainWebpack做高級配置

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

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

官方文檔給我提供了一些簡單的示例：

修改 Loader 選項

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

添加一個新的 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()
 }
}

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

// 添加svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .tap(options => {
    options = {
     symbolId: 'icon-[name]'
    }
    return options
   })

修改插件的代碼可以看下面的例子；

先上代碼，今天主要講我們項目中配置，配置的api地址： https://cli.vuejs.org/zh/conf...

const path = require('path')
const webpack = require('webpack')
module.exports = {
 // 修改output.path
 outputDir: 'dist',
 // 修改output.publishPath
 publishPath: './',
 chainWebpack: config => {
  // 添加全局scss文件
  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  types.forEach(type => { //匹配到所有需要導(dǎo)入的文件
   config.module.rule('scss').oneOf(type).use('style-resource')
    .loader('style-resources-loader')
    .options({
     patterns: [
      path.resolve(__dirname, 'src/css/base.scss')
     ]
    })
  })
  // 添加svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .tap(options => {
    options = {
     symbolId: 'icon-[name]'
    }
    return options
   })
  // 移除 prefetch 插件 //預(yù)加載
  config.plugins.delete('prefetch')
  // 引入
  const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
  config.plugin('dll-reference-plugin')
   .use(webpack.DllReferencePlugin)
   .tap(options => {
    options[0] = {
     context: __dirname,
     manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
    }
    return options
   })
  config.plugin('add-asset-html-webpack-plugin')
   .use('add-asset-html-webpack-plugin')
   .tap(options => {
    options[0] = {
     filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
    }
    return options
   })
 }
}

上述代碼里使用了style-resources-loader，可以自動化導(dǎo)入文件；

DllReferencePlugin這個插件是為了使第三方以來和我們自己編寫的代碼分開打包，提升打包速度；需要和add-asset-html-webpack-plugin這個插件一起使用；

使用這個插件打包后，在src/common_chunk這個文件夾下生成工具庫，將第三方依賴打包到一個文件里，并生成一個所有庫代碼的一個索引manifest.json文件

ps:全局引入公共樣式文件的另一種方法，這樣也可以直接在使用公共樣式了；

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

以上就是如何在vue-cli中使用chainWebpack，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。