快捷導(dǎo)航

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

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

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

引入問(wèn)題

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

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

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

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

所以我們會(huì)想到，這里使用變量的形式訪問(wèn)到的

htmlWebpackPlugin.options.title

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

這就引出了問(wèn)題：

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

也就是如何修改這個(gè)值

htmlWebpackPlugin.options.title

修改htmlWebpackPlugin.options.title

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

vue inspect > output.js

運(yùn)行后項(xiàng)目中會(huì)自動(dòng)生成一個(gè)文件output.js，這個(gè)就是當(dāng)前項(xiàng)目的webpack配置內(nèi)容

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

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

此時(shí)，重新啟動(dòng)項(xiàng)目npm run serve可以看到項(xiàng)目在瀏覽器中的title變成了我們?cè)O(shè)置的值title test，我們重新導(dǎo)出webpack的配置看看內(nèi)容是不是改變了

vue inspect > output.js

到此為止我們就通過(guò)修改webpack配置改變了項(xiàng)目title值。

chainWebpack

從上面的應(yīng)用實(shí)例中通過(guò)chainWebpack鏈?zhǔn)讲僮餍薷牧藈ebpack的配置，下面是幾個(gè)利用鏈?zhǔn)讲僮餍薷牡睦?/p>

修改Loader選項(xiàng)

這是修改之前的配置

// 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é)：如果你想修改某個(gè)配置項(xiàng)的值我們都可以先使用inspect出webpack的配置內(nèi)容，對(duì)應(yīng)的每一項(xiàng)都有注釋告訴我們應(yīng)該如何書(shū)寫(xiě)

例如上面使用紅框框出的

config.plugin('html')

以及

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

添加Loader選項(xiàng)

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()
      // 你還可以再添加一個(gè) loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

替換規(guī)則的Loader

如果你要替換某個(gè)規(guī)則的Loader，如果直接調(diào)用鏈?zhǔn)讲僮?，只是在該?guī)則下增加了一條Loader

所以正確的做法是先把這個(gè)規(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()
      // 你還可以再添加一個(gè) loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

此時(shí)我們inspect結(jié)果

添加plugin

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

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

此時(shí)我們inspect結(jié)果

configureWebpack

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

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

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

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

像這樣：

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