前言
在項目開發(fā)中我們難免碰到需要對webpack配置更改的情況，今天就主要來講一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpack簡單的配置；用chainWebpack做高級配置；包括對loader的添加，修改；以及插件的配置
1、首先簡單介紹一下webpack中l(wèi)oader的簡單使用：
loader：是webpack用來預(yù)處理模塊的，在一個模塊被引入之前，會預(yù)先使用loader處理模塊的內(nèi)容，在你打包的時候?qū)δ承﹥?nèi)容需要loader來處理一下，比如css模塊；默認webpack只會處理js代碼，所以當我們想要去打包其他內(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ī)則中，當你匹配了這個文件后，需要使用相應(yīng)的loader去處理這類型的文件，use接收的是一個數(shù)組，意味著當他匹配到文件后，它可以啟用很多的loader去處理文件的內(nèi)容；
如果使用的是loader的默認配置，可以寫use:['css-loader','style-loader']；
如果是需要用到額外配置則需要寫成對象，講配置寫在options里；
當然，還會有其他的一些屬性比如（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"``;``
`}`
`}`
`}`
`};`
總結(jié)
以上所述是小編給大家介紹的vue-cli中chainWebpack的使用方法 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
