configureWebpack、chainWebpack配置vue.config.js方式

更新時間：2024年01月24日 15:46:02 作者：土豆Coder

這篇文章主要介紹了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

引入問題

我們使用vue create waf-console-vue創(chuàng)建一個Vue項目時，新生成的項目我們可以看到在public/index.html中有這樣的內(nèi)容：

<title><%= htmlWebpackPlugin.options.title %></title>

在Vue CLI 關(guān)于HTML和靜態(tài)資源中有說明：

public/index.html文件是一個會被處理的模板html-webpack-plugin處理的模板。在構(gòu)建過程中，資源鏈接會被自動注入。

所以我們會想到，這里使用變量的形式訪問到的

htmlWebpackPlugin.options.title

也就是我們在創(chuàng)建項目的時候命名的項目名稱，然后被腳手架Vue CLI構(gòu)建項目時自動被處理模板寫入了webpack配置中，那我們要如何修改這個配置項呢？

這就引出了問題：

我們?nèi)绾卧?code>@vue-cli4的vue.config.js文件中修改webpack中的這個配置項？

也就是如何修改這個值

htmlWebpackPlugin.options.title

修改htmlWebpackPlugin.options.title

因為新的腳手架vue不希望我們直接操作webpack配置文件，所以不再提供webpack.dev.js這樣的文件了，如果我們想要修改webpack配置需要手動創(chuàng)建文件vue.config.js，那我們?nèi)绾慰茨J項目已經(jīng)配置好的webpack配置內(nèi)容呢？

vue inspect > output.js

運行后項目中會自動生成一個文件output.js，這個就是當前項目的webpack配置內(nèi)容

紅框中我們看到title就是我們的項目名稱，現(xiàn)在我們要修改這個值

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'title test'
        return args
      })
  }
}

此時，重新啟動項目npm run serve可以看到項目在瀏覽器中的title變成了我們設(shè)置的值title test，我們重新導出webpack的配置看看內(nèi)容是不是改變了

vue inspect > output.js

到此為止我們就通過修改webpack配置改變了項目title值。

chainWebpack

從上面的應(yīng)用實例中通過chainWebpack鏈式操作修改了webpack的配置，下面是幾個利用鏈式操作修改的例子

修改Loader選項

這是修改之前的配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'title test'
        return args
      })
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.compilerOptions.whitespace = '' // 修改的地方
          return options
        })
  }
}

修改后我們inspect結(jié)果

總結(jié)：如果你想修改某個配置項的值我們都可以先使用inspect出webpack的配置內(nèi)容，對應(yīng)的每一項都有注釋告訴我們應(yīng)該如何書寫

例如上面使用紅框框出的

config.plugin('html')

以及

config.module.rule('vue').use('vue-loader')

添加Loader選項

module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'title test'
        return args
      })
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.compilerOptions.whitespace = ''
          return options
        })
    // GraphQL Loader
    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

如果你要替換某個規(guī)則的Loader，如果直接調(diào)用鏈式操作，只是在該規(guī)則下增加了一條Loader

所以正確的做法是先把這個規(guī)則已有的Loader都給刪除，然后再加上自己的Loader，這里以svg為例，修改之前的內(nèi)容是

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear() // 清除已有的所有l(wèi)oader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'title test'
        return args
      })
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.compilerOptions.whitespace = ''
          return options
        })
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你還可以再添加一個 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

此時我們inspect結(jié)果

添加plugin

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config
    	.plugin('node-polyfill-webpack-plugin')
    	.use(NodePolyfillPlugin)
  }
}

此時我們inspect結(jié)果

configureWebpack

// vue.config.js
module.exports = {
  configureWebpack: config => {
    console.log(config)
  },
  chainWebpack: config => {
    console.log(config)
  }
}

通過打印出來的值可以看到結(jié)果一樣，都是webpack的配置內(nèi)容。

configureWebpack對象返回的值會被webpack-merge合并到最終的webpack配置中，如果你需要基于環(huán)境有條件的配置行為，或者想要直接修改配置，可以使用這個。

該方法的第一個參數(shù)就是已經(jīng)解析好的配置，你可以直接修改配置，或者返回一個將會被合并的對象。

像這樣：

// vue.config.js
module.exports = {
  configureWebpack: config => {
	  if (process.env.NODE_ENV === 'production') {
	    // 為生產(chǎn)環(huán)境修改配置
	  } else {
	    // 為開發(fā)環(huán)境修改配置
	  }
	}
}