前言

在項(xiàng)目開發(fā)中我們難免碰到需要對webpack配置更改的情況，今天就主要來講一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpack簡單的配置；用chainWebpack做高級配置；包括對loader的添加，修改；以及插件的配置

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

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

使用方法：

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

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

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

test:test后是一個(gè)正則表達(dá)式，匹配不同的文件類型;

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

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

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

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

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

2、用configureWebpack簡單的配置；

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

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

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

// vue.config.jsmodule.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 維護(hù)的。這個(gè)庫提供了一個(gè) webpack 原始配置的上層抽象，使其可以定義具名的 loader 規(guī)則和具名插件，并有機(jī)會在后期進(jìn)入這些規(guī)則并對它們的選項(xiàng)進(jìn)行修改。