摘要:這個(gè)庫提供了一個(gè)原始配置的上層抽象,使其可以定義具名的規(guī)則和具名插件,并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對(duì)它們的選項(xiàng)進(jìn)行修改。它允許我們更細(xì)粒度的控制其內(nèi)部配置。接下來有一些常見的在中的修改的例子。
前言
在項(xiàng)目開發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,今天就主要來講一下在vue.config.js中對(duì)一些配置的更改,簡單介紹一下loader的使用;用configureWebpack簡單的配置;用chainWebpack做高級(jí)配置;包括對(duì)loader的添加,修改;以及插件的配置
1、首先簡單介紹一下webpack中l(wèi)oader的簡單使用:loader:是webpack用來預(yù)處理模塊的,在一個(gè)模塊被引入之前,會(huì)預(yù)先使用loader處理模塊的內(nèi)容,在你打包的時(shí)候?qū)δ承﹥?nèi)容需要loader來處理一下,比如css模塊;默認(rèn)webpack只會(huì)處理js代碼,所以當(dāng)我們想要去打包其他內(nèi)容時(shí),就需要相應(yīng)的loader去處理某些內(nèi)容
使用方法:
在配置文件中webpack.config.js加入module屬性,該屬性是一個(gè)對(duì)象,在這個(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è)對(duì)象,匹配不同的規(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"];
如果是需要用到額外配置則需要寫成對(duì)象,講配置寫在options里;
當(dāng)然,還會(huì)有其他的一些屬性比如(exclude、include等),這里就不再詳細(xì)贅述
在你使用這些loader之前需要用npm去安裝這些包;
/ vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] } }
該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。
如果你需要基于環(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)境修改配置... } } }3、用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)部配置。接下來有一些常見的在 vue.config.js 中的 chainWebpack 修改的例子。
官方文檔給我提供了一些簡單的示例:
修改 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 }) } }
添加一個(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è)規(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 })
修改插件的代碼可以看下面的例子;
先上代碼,今天主要講我們項(xiàng)目中配置,配置的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òng)化導(dǎo)入文件;
添加svg-sprite-loader的目的是為了將svg圖片轉(zhuǎn)換為svg標(biāo)簽插入html,以方便便我們使用類似以下方式,webpack里默認(rèn)處理svg的loader是file-loader,所以要移除這個(gè)配置:
DllReferencePlugin這個(gè)插件是為了使第三方以來和我們自己編寫的代碼分開打包,提升打包速度;需要和add-asset-html-webpack-plugin這個(gè)插件一起使用;
使用這個(gè)插件打包后,在src/common_chunk這個(gè)文件夾下生成工具庫,將第三方依賴打包到一個(gè)文件里,并生成一個(gè)所有庫代碼的一個(gè)索引manifest.json文件
ps:全局引入公共樣式文件的另一種方法,這樣也可以直接在使用公共樣式了;
module.exports = { // ... css: { loaderOptions: { sass: { // 根據(jù)自己樣式文件的位置調(diào)整 data: `@import "@src/css/base.scss";` } } } };
本文參考的文檔:https://cli.vuejs.org/zh/guid...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116142.html
摘要:這個(gè)庫提供了一個(gè)原始配置的上層抽象,使其可以定義具名的規(guī)則和具名插件,并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對(duì)它們的選項(xiàng)進(jìn)行修改。它允許我們更細(xì)粒度的控制其內(nèi)部配置。接下來有一些常見的在中的修改的例子。 前言 在項(xiàng)目開發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,今天就主要來講一下在vue.config.js中對(duì)一些配置的更改,簡單介紹一下loader的使用;用configureWebpa...
摘要:這個(gè)庫提供了一個(gè)原始配置的上層抽象,使其可以定義具名的規(guī)則和具名插件,并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對(duì)它們的選項(xiàng)進(jìn)行修改。它允許我們更細(xì)粒度的控制其內(nèi)部配置。接下來有一些常見的在中的修改的例子。 前言 在項(xiàng)目開發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,今天就主要來講一下在vue.config.js中對(duì)一些配置的更改,簡單介紹一下loader的使用;用configureWebpa...
摘要:前言通過搭建交互式的項(xiàng)目腳手架。通過快速開始零配置原型開發(fā)。與此同時(shí),它也為每個(gè)工具提供了調(diào)整配置的靈活性,無需。例如,如果你的應(yīng)用被部署在,則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔 前言 通過 @vue/cli 搭建交互式的項(xiàng)目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-se...
摘要:前言通過搭建交互式的項(xiàng)目腳手架。通過快速開始零配置原型開發(fā)。與此同時(shí),它也為每個(gè)工具提供了調(diào)整配置的靈活性,無需。例如,如果你的應(yīng)用被部署在,則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔 前言 通過 @vue/cli 搭建交互式的項(xiàng)目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發(fā)。一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-se...
摘要:那么,我們?cè)撊绾稳ヅ渲米约旱捻?xiàng)目了其實(shí)這一切都是因?yàn)榈捻?xiàng)目初始化,幫開發(fā)者已經(jīng)解決了,甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區(qū)別 vue-cli 3 的 github 倉庫由原有獨(dú)立的 github 倉庫遷移到了 vue 項(xiàng)目下 ...
閱讀 786·2019-08-30 15:55
閱讀 1529·2019-08-30 15:52
閱讀 2695·2019-08-30 15:44
閱讀 2104·2019-08-30 11:14
閱讀 2621·2019-08-29 13:59
閱讀 1816·2019-08-29 13:45
閱讀 1012·2019-08-29 13:21
閱讀 3373·2019-08-26 13:31