vue.config.js中configureWebpack與chainWebpack區(qū)別及說明

更新時間：2022年09月01日 09:46:20 作者：zcm花開不敗

這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

configureWebpack與chainWebpack區(qū)別

configureWebpack與chainWebpack的作用相同，唯一的區(qū)別就是他們修改webpack配置方式不同：

https://cli.vuejs.org/zh/config/#configurewebpack

configureWebpack 通過操作對象得形式來修改迷人得webpack配置，該對象將會唄webpack-merge合并入最終得webpack配置

chainWebpack 通過鏈?zhǔn)骄幊痰男问絹硇薷哪J(rèn)的webpack配置

1.configureWebpack

1.1configureWebpack對象形式　　

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 是否在保存時候檢查代碼
?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{
? ? ...
? }
? // 返回一個將要合并得對象
? return {
? ? resolve: {
? ? ? alias: {
? ? ? ? '@asset': resolve("src/assets")
? ? ? }
? ? }
? }
}

2.chainWebpack

修改Loader選項

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

添加一個新的Loader

module.exports = {
? chainWebpack: config => {
? ? config.module
? ? .rule('graphql')
? ? .test('/\.graphql$/')
? ? .use(''graphql-tag/loader')
? ? ?.loader('graphql-tag/loader)
? ? ?.end()
? ? // 你還可以再添加一個loader
? ? .use('other-loader')
? ? ? .loader('other-loader')
? ? ? .end()
? }
}

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

module.exports = {
? chainWebpack: config => {
? ? const svgRule = config.module.rule('svg')
? ? // 清楚已有的所有l(wèi)oader。
? ? // 如果你不這樣做，接下來的loader會附加在該規(guī)則現(xiàn)有的 loader 之后。
? ? svgRule.uses.clear()
? ? // 添加要替換的 loader?
? ? svgRule
? ? ? .use('vue-svg-loader')
? ? ? ? .loader('vue-svg-loader')
? }
}

vue-cli中chainWebpack和configureWebpack

我們目前做的是國外的項目，考慮到東南亞瀏覽器版本低，所以公司采用了vue-cli2來搭建項目。

vue.config.js

configureWebpack可以是對象，也可以是函數(shù)
chainWebpack 可以是對象也可以是函數(shù)

當(dāng)我們不知道config中有哪些屬性或者方法的時候我們就可以采取函數(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解析時候查找文件的順序
? ? 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信息中沒有發(fā)現(xiàn)performance這個屬性但是你利用對象的處理方式就可以。

? configureWebpack: {
? ? performance: {
? ? ? hints: 'error', // 枚舉
? ? ? maxAssetSize: 30000000, // 整數(shù)類型（以字節(jié)為單位） // 單個文件大小超出就提示
? ? ? maxEntrypointSize: 500000000, // 整數(shù)類型（以字節(jié)為單位） // 入口文件大小超出設(shè)定的值 就提示
? ? ? assetFilter: function (assetFilename) {
? ? ? ? // 提供資源文件名的斷言函數(shù)
? ? ? ? return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
? ? ? }
? ? },
? },

這個和 vue-cli解析webpack的方式有關(guān)系，對象的方式解析的時候直接就取webpack原始的配置項目，然后再進行更新，而函數(shù)的方式只暴露一些常用的必須的方法或者屬性，個人理解。

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ì)，個人喜歡打印這個然后找具體的使用方法

對象的方式來配置，需要參照webapck文檔來配置

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: