vue.config.js中configureWebpack與chainWebpack區(qū)別及說(shuō)明
configureWebpack與chainWebpack區(qū)別
configureWebpack與chainWebpack的作用相同,唯一的區(qū)別就是他們修改webpack配置方式不同:
https://cli.vuejs.org/zh/config/#configurewebpack
configureWebpack 通過(guò)操作對(duì)象得形式來(lái)修改迷人得webpack配置,該對(duì)象將會(huì)唄webpack-merge合并入最終得webpack配置
chainWebpack 通過(guò)鏈?zhǔn)骄幊痰男问絹?lái)修改默認(rèn)的webpack配置
1.configureWebpack
1.1configureWebpack對(duì)象形式
configureWebpack: { ? resolve: { ? ?// 別名配置 ? ? alias: { ? ? ? 'assets': '@/assets', ? ? ? 'common': '@/common', 'components': '@/components' ? ?} ? ? ?} ? }
1.2configureWebpack函數(shù)形式
const path = require('path'); function resolve(dir) { return path.join(__dirname,dir) } module.exports = { ?devServer: { ? ?... ?}, ?lintOnSave:false, // eslint-loader 是否在保存時(shí)候檢查代碼 ?productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成sourceMap 文件 ?filenameHashing: true, // 文件hash configureWebpack: config => { if(process.env.NODE_ENV === 'production') { ... }else { ... } // 直接修改配置 config.resolve.alias['assets'] = resolve('src/assets') } }
或者
configureWebpack: config => { ? if(process.env.NODE_ENV){ ? ? ... ? }else{ ? ? ... ? } ? // 返回一個(gè)將要合并得對(duì)象 ? return { ? ? resolve: { ? ? ? alias: { ? ? ? ? '@asset': resolve("src/assets") ? ? ? } ? ? } ? } }
2.chainWebpack
修改Loader選項(xiàng)
module.exports = { ? chainWebpack: config => { ? ? config.module ? ? .rule('vue') ? ? .use('vue-loader') ? ? .tap(options => { ? ? ? // 修改他的選項(xiàng) ? ? ? return options ? ? }) ? } }
添加一個(gè)新的Loader
module.exports = { ? chainWebpack: config => { ? ? config.module ? ? .rule('graphql') ? ? .test('/\.graphql$/') ? ? .use(''graphql-tag/loader') ? ? ?.loader('graphql-tag/loader) ? ? ?.end() ? ? // 你還可以再添加一個(gè)loader ? ? .use('other-loader') ? ? ? .loader('other-loader') ? ? ? .end() ? } }
替換一個(gè)規(guī)則里的Loader
module.exports = { ? chainWebpack: config => { ? ? const svgRule = config.module.rule('svg') ? ? // 清楚已有的所有l(wèi)oader。 ? ? // 如果你不這樣做,接下來(lái)的loader會(huì)附加在該規(guī)則現(xiàn)有的 loader 之后。 ? ? svgRule.uses.clear() ? ? // 添加要替換的 loader? ? ? svgRule ? ? ? .use('vue-svg-loader') ? ? ? ? .loader('vue-svg-loader') ? } }
vue-cli中chainWebpack和configureWebpack
我們目前做的是國(guó)外的項(xiàng)目,考慮到東南亞瀏覽器版本低,所以公司采用了vue-cli2來(lái)搭建項(xiàng)目。
vue.config.js
- configureWebpack可以是對(duì)象,也可以是函數(shù)
- chainWebpack 可以是對(duì)象也可以是函數(shù)
當(dāng)我們不知道config中有哪些屬性或者方法的時(shí)候我們就可以采取函數(shù)的方式打印config然后再嘗試這如何配置
函數(shù) 打印config
打印 configureWebpack中的config
const path = require('path') const resolve = (dir) => path.join(__dirname, dir) module.exports = { ? publicPath: './', ? runtimeCompiler: true, ? configureWebpack: (config) => { ? ? console.log(config) ? }, }
config結(jié)果為
? mode: 'production', ? context: 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc', ? devtool: false, ? node: { ? ? setImmediate: false, ? ? process: 'mock', ? ? dgram: 'empty', ? ? fs: 'empty', ? ? net: 'empty', ? ? tls: 'empty', ? ? child_process: 'empty' ? }, ? output: { ? ? path: 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc\\dist', ? ? filename: 'js/[name].[contenthash:8].js', ? ? publicPath: '', ? ? chunkFilename: 'js/[name].[contenthash:8].js' ? }, ? resolve: { ? ? alias: { ? ? ? '@': 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc\\src', //別名 ? ? ? 'vue$': 'vue/dist/vue.esm.js' ? ? }, ? ? extensions: [ '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm' ],// vue解析時(shí)候查找文件的順序 ? ? modules: [ // modules包的文件位置 ? ? ? 'node_modules', ? ? ? 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc\\node_modules', ? ? ? 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc\\node_modules\\@vue\\cli-service\\node_modules' ? ? ], ? ? plugins: [ [Object] ] ? }, ? resolveLoader: { ? ? modules: [ ? ? // 這塊就是modules的文件所在位置 ? ? ], ? ? plugins: [ [Object] ] ? }, ? module: { ? ? noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/, ? ? rules: [ ? ? ? [Object], [Object], ? ? ? [Object], [Object], ? ? ? [Object], [Object], ? ? ? [Object], [Object], ? ? ? [Object], [Object], ? ? ? [Object], [Object], ? ? ? [Object] ? ? ] ? }, ? optimization: { ? ? splitChunks: { cacheGroups: [Object] }, ? ? minimizer: [ [TerserPlugin] ] ? }, ? plugins: [ ? ? VueLoaderPlugin {}, ? ? DefinePlugin { definitions: [Object] }, ? ? CaseSensitivePathsPlugin { ? ? ? options: {}, ? ? ? logger: [Object [console]], ? ? ? pathCache: Map(0) {}, ? ? ? fsOperations: 0, ? ? ? primed: false ? ? }, ? ? FriendlyErrorsWebpackPlugin { ? ? ? compilationSuccessInfo: {}, ? ? ? onErrors: undefined, ? ? ? shouldClearConsole: true, ? ? ? formatters: [Array], ? ? ? transformers: [Array], ? ? ? previousEndTimes: {} ? ? }, ? ? MiniCssExtractPlugin { options: [Object] }, ? ? OptimizeCssnanoPlugin { options: [Object] }, ? ? HashedModuleIdsPlugin { options: [Object] }, ? ? NamedChunksPlugin { nameResolver: [Function (anonymous)] }, ? ? HtmlWebpackPlugin { options: [Object] }, ? ? PreloadPlugin { options: [Object] }, ? ? PreloadPlugin { options: [Object] }, ? ? CopyPlugin { patterns: [Array], options: {} } ? ], ? entry: { app: [ './src/main.js' ] } }
有了以上的信息,你就知道如何配置了,config信息中沒(méi)有發(fā)現(xiàn)performance這個(gè)屬性但是你利用對(duì)象的處理方式就可以。
? configureWebpack: { ? ? performance: { ? ? ? hints: 'error', // 枚舉 ? ? ? maxAssetSize: 30000000, // 整數(shù)類型(以字節(jié)為單位) // 單個(gè)文件大小超出就提示 ? ? ? maxEntrypointSize: 500000000, // 整數(shù)類型(以字節(jié)為單位) // 入口文件大小超出設(shè)定的值 就提示 ? ? ? assetFilter: function (assetFilename) { ? ? ? ? // 提供資源文件名的斷言函數(shù) ? ? ? ? return assetFilename.endsWith('.css') || assetFilename.endsWith('.js') ? ? ? } ? ? }, ? },
這個(gè)和 vue-cli解析webpack的方式有關(guān)系,對(duì)象的方式解析的時(shí)候直接就取webpack原始的配置項(xiàng)目,然后再進(jìn)行更新,而函數(shù)的方式只暴露一些常用的必須的方法或者屬性,個(gè)人理解。
chainWebpack 函數(shù)式
const path = require('path') const resolve = (dir) => path.join(__dirname, dir) module.exports = { ? publicPath: './', ? runtimeCompiler: true, ? chainWebpack : (config) => { ? ? console.log(config) ? }, }
config打印
parent: undefined, store: Map(3) { 'mode' => 'production', 'context' => 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc', 'devtool' => false }, devServer: <ref *2> { parent: [Circular *1], store: Map(0) {}, allowedHosts: { parent: [Circular *2], store: Set(0) {} }, shorthands: [ 'after', 'before', 'bonjour', 'clientLogLevel', 'color', 'compress', 'contentBase', 'disableHostCheck', 'filename', 'headers', 'historyApiFallback', 'host', 'hot', 'hotOnly', 'http2', 'https', 'index', 'info', 'inline', 'lazy', 'mimeTypes', 'noInfo', 'open', 'openPage', 'overlay', 'pfx', 'pfxPassphrase', 'port', 'proxy', 'progress', 'public', 'publicPath', 'quiet', 'setup', 'socket', 'sockHost', 'sockPath', 'sockPort', 'staticOptions', 'stats', 'stdin', 'useLocalIp', 'watchContentBase', 'watchOptions', 'writeToDisk' ], after: [Function (anonymous)], before: [Function (anonymous)], bonjour: [Function (anonymous)], clientLogLevel: [Function (anonymous)], color: [Function (anonymous)], compress: [Function (anonymous)], contentBase: [Function (anonymous)], disableHostCheck: [Function (anonymous)], filename: [Function (anonymous)], headers: [Function (anonymous)], historyApiFallback: [Function (anonymous)], host: [Function (anonymous)], hot: [Function (anonymous)], hotOnly: [Function (anonymous)], http2: [Function (anonymous)], https: [Function (anonymous)], index: [Function (anonymous)], info: [Function (anonymous)], inline: [Function (anonymous)], lazy: [Function (anonymous)], mimeTypes: [Function (anonymous)], noInfo: [Function (anonymous)], open: [Function (anonymous)], openPage: [Function (anonymous)], overlay: [Function (anonymous)], pfx: [Function (anonymous)], pfxPassphrase: [Function (anonymous)], port: [Function (anonymous)], proxy: [Function (anonymous)], progress: [Function (anonymous)], public: [Function (anonymous)], publicPath: [Function (anonymous)], quiet: [Function (anonymous)], setup: [Function (anonymous)], socket: [Function (anonymous)], sockHost: [Function (anonymous)], sockPath: [Function (anonymous)], sockPort: [Function (anonymous)], staticOptions: [Function (anonymous)], stats: [Function (anonymous)], stdin: [Function (anonymous)], useLocalIp: [Function (anonymous)], watchContentBase: [Function (anonymous)], watchOptions: [Function (anonymous)], writeToDisk: [Function (anonymous)] }, entryPoints: { parent: [Circular *1], store: Map(1) { 'app' => [Object] } }, module: <ref *3> { parent: [Circular *1], store: Map(1) { 'noParse' => /^(vue|vue-router|vuex|vuex-router-sync)$/ }, rules: { parent: [Circular *3], store: [Map] }, defaultRules: { parent: [Circular *3], store: Map(0) {} }, shorthands: [ 'noParse', 'strictExportPresence' ], noParse: [Function (anonymous)], strictExportPresence: [Function (anonymous)] }, node: { parent: [Circular *1], store: Map(7) { 'setImmediate' => false, 'process' => 'mock', 'dgram' => 'empty', 'fs' => 'empty', 'net' => 'empty', 'tls' => 'empty', 'child_process' => 'empty' } }, optimization: <ref *4> { parent: [Circular *1], store: Map(1) { 'splitChunks' => [Object] }, minimizers: { parent: [Circular *4], store: [Map] }, shorthands: [ 'concatenateModules', 'flagIncludedChunks', 'mergeDuplicateChunks', 'minimize', 'namedChunks', 'namedModules', 'nodeEnv', 'noEmitOnErrors', 'occurrenceOrder', 'portableRecords', 'providedExports', 'removeAvailableModules', 'removeEmptyChunks', 'runtimeChunk', 'sideEffects', 'splitChunks', 'usedExports' ], concatenateModules: [Function (anonymous)], flagIncludedChunks: [Function (anonymous)], mergeDuplicateChunks: [Function (anonymous)], minimize: [Function (anonymous)], namedChunks: [Function (anonymous)], namedModules: [Function (anonymous)], nodeEnv: [Function (anonymous)], noEmitOnErrors: [Function (anonymous)], occurrenceOrder: [Function (anonymous)], portableRecords: [Function (anonymous)], providedExports: [Function (anonymous)], removeAvailableModules: [Function (anonymous)], removeEmptyChunks: [Function (anonymous)], runtimeChunk: [Function (anonymous)], sideEffects: [Function (anonymous)], splitChunks: [Function (anonymous)], usedExports: [Function (anonymous)] }, output: { parent: [Circular *1], store: Map(4) { 'path' => 'C:\\Users\\shiyang.xue\\Desktop\\sems-pc\\dist', 'filename' => 'js/[name].[contenthash:8].js', 'publicPath' => '', 'chunkFilename' => 'js/[name].[contenthash:8].js' }, shorthands: [ 'auxiliaryComment', 'chunkCallbackName', 'chunkFilename', 'chunkLoadTimeout', 'crossOriginLoading', 'devtoolFallbackModuleFilenameTemplate', 'devtoolLineToLine', 'devtoolModuleFilenameTemplate', 'devtoolNamespace', 'filename', 'futureEmitAssets', 'globalObject', 'hashDigest', 'hashDigestLength', 'hashFunction', 'hashSalt', 'hotUpdateChunkFilename', 'hotUpdateFunction', 'hotUpdateMainFilename', 'jsonpFunction', 'library', 'libraryExport', 'libraryTarget', 'path', 'pathinfo', 'publicPath', 'sourceMapFilename', 'sourcePrefix', 'strictModuleExceptionHandling', 'umdNamedDefine', 'webassemblyModuleFilename' ], auxiliaryComment: [Function (anonymous)], chunkCallbackName: [Function (anonymous)], chunkFilename: [Function (anonymous)], chunkLoadTimeout: [Function (anonymous)], crossOriginLoading: [Function (anonymous)], devtoolFallbackModuleFilenameTemplate: [Function (anonymous)], devtoolLineToLine: [Function (anonymous)], devtoolModuleFilenameTemplate: [Function (anonymous)], devtoolNamespace: [Function (anonymous)], filename: [Function (anonymous)], futureEmitAssets: [Function (anonymous)], globalObject: [Function (anonymous)], hashDigest: [Function (anonymous)], hashDigestLength: [Function (anonymous)], hashFunction: [Function (anonymous)], hashSalt: [Function (anonymous)], hotUpdateChunkFilename: [Function (anonymous)], hotUpdateFunction: [Function (anonymous)], hotUpdateMainFilename: [Function (anonymous)], jsonpFunction: [Function (anonymous)], library: [Function (anonymous)], libraryExport: [Function (anonymous)], libraryTarget: [Function (anonymous)], path: [Function (anonymous)], pathinfo: [Function (anonymous)], publicPath: [Function (anonymous)], sourceMapFilename: [Function (anonymous)], sourcePrefix: [Function (anonymous)], strictModuleExceptionHandling: [Function (anonymous)], umdNamedDefine: [Function (anonymous)], webassemblyModuleFilename: [Function (anonymous)] }, performance: { parent: [Circular *1], store: Map(0) {}, shorthands: [ 'assetFilter', 'hints', 'maxAssetSize', 'maxEntrypointSize' ], assetFilter: [Function (anonymous)], hints: [Function (anonymous)], maxAssetSize: [Function (anonymous)], maxEntrypointSize: [Function (anonymous)] }, plugins: { parent: [Circular *1], store: Map(12) { 'vue-loader' => [Object], 'define' => [Object], 'case-sensitive-paths' => [Object], 'friendly-errors' => [Object], 'extract-css' => [Object], 'optimize-css' => [Object], 'hash-module-ids' => [Object], 'named-chunks' => [Object], 'html' => [Object], 'preload' => [Object], 'prefetch' => [Object], 'copy' => [Object] } }, resolve: <ref *5> { parent: [Circular *1], store: Map(0) {}, alias: { parent: [Circular *5], store: [Map] }, aliasFields: { parent: [Circular *5], store: Set(0) {} }, descriptionFiles: { parent: [Circular *5], store: Set(0) {} }, extensions: { parent: [Circular *5], store: [Set] }, mainFields: { parent: [Circular *5], store: Set(0) {} }, mainFiles: { parent: [Circular *5], store: Set(0) {} }, modules: { parent: [Circular *5], store: [Set] }, plugins: { parent: [Circular *5], store: [Map] }, shorthands: [ 'cachePredicate', 'cacheWithContext', 'concord', 'enforceExtension', 'enforceModuleExtension', 'symlinks', 'unsafeCache' ], cachePredicate: [Function (anonymous)], cacheWithContext: [Function (anonymous)], concord: [Function (anonymous)], enforceExtension: [Function (anonymous)], enforceModuleExtension: [Function (anonymous)], symlinks: [Function (anonymous)], unsafeCache: [Function (anonymous)] }, resolveLoader: <ref *6> { parent: [Circular *1], store: Map(0) {}, alias: { parent: [Circular *6], store: Map(0) {} }, aliasFields: { parent: [Circular *6], store: Set(0) {} }, descriptionFiles: { parent: [Circular *6], store: Set(0) {} }, extensions: { parent: [Circular *6], store: Set(0) {} }, mainFields: { parent: [Circular *6], store: Set(0) {} }, mainFiles: { parent: [Circular *6], store: Set(0) {} }, modules: { parent: [Circular *6], store: [Set] }, plugins: { parent: [Circular *6], store: [Map] }, shorthands: [ 'cachePredicate', 'cacheWithContext', 'concord', 'enforceExtension', 'enforceModuleExtension', 'symlinks', 'unsafeCache' ], cachePredicate: [Function (anonymous)], cacheWithContext: [Function (anonymous)], concord: [Function (anonymous)], enforceExtension: [Function (anonymous)], enforceModuleExtension: [Function (anonymous)], symlinks: [Function (anonymous)], unsafeCache: [Function (anonymous)], moduleExtensions: { parent: [Circular *6], store: Set(0) {} }, packageMains: { parent: [Circular *6], store: Set(0) {} } }, shorthands: [ 'amd', 'bail', 'cache', 'context', 'devtool', 'externals', 'loader', 'mode', 'name', 'parallelism', 'profile', 'recordsInputPath', 'recordsPath', 'recordsOutputPath', 'stats', 'target', 'watch', 'watchOptions' ], amd: [Function (anonymous)], bail: [Function (anonymous)], cache: [Function (anonymous)], context: [Function (anonymous)], devtool: [Function (anonymous)], externals: [Function (anonymous)], loader: [Function (anonymous)], mode: [Function (anonymous)], name: [Function (anonymous)], parallelism: [Function (anonymous)], profile: [Function (anonymous)], recordsInputPath: [Function (anonymous)], recordsPath: [Function (anonymous)], recordsOutputPath: [Function (anonymous)], stats: [Function (anonymous)], target: [Function (anonymous)], watch: [Function (anonymous)], watchOptions: [Function (anonymous)] }
chainWebpack中的config信息比較完成,而且詳細(xì),個(gè)人喜歡打印這個(gè)然后找具體的使用方法
對(duì)象的方式來(lái)配置,需要參照webapck文檔來(lái)配置
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能示例
這篇文章主要介紹了vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能,簡(jiǎn)單分析了v-model指令的功能并結(jié)合實(shí)例形式給出了v-model指令實(shí)現(xiàn)數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2018-05-05element-ui 設(shè)置菜單欄展開(kāi)的方法
今天小編就為大家分享一篇element-ui 設(shè)置菜單欄展開(kāi)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue使用節(jié)流函數(shù)的踩坑實(shí)例指南
防抖和節(jié)流的目的都是為了減少不必要的計(jì)算,下面這篇文章主要給大家介紹了關(guān)于vue使用節(jié)流函數(shù)踩坑的相關(guān)資料,需要的朋友可以參考下2021-05-05Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Element-UI清空表單及驗(yàn)證不生效的問(wèn)題解決
本文主要介紹了Element-UI清空表單及驗(yàn)證不生效的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實(shí)現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式,方式一是通過(guò)監(jiān)聽(tīng)事件實(shí)現(xiàn)方式二是通過(guò) v-model 實(shí)現(xiàn),每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-11-11基于vue-upload-component封裝一個(gè)圖片上傳組件的示例
這篇文章主要介紹了基于vue-upload-component封裝一個(gè)圖片上傳組件的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10