Editing webpack.config.js when using vue-cli 3


#1

I need to edit webpack.config.js in order to work around a limitation with Webpack’s querystring implementation (see https://github.com/mhart/aws4/issues/46). I was able to easily edit webpack.config.js before when it was located in /build but with vue-cli 3 projects it is now located in node_modules. I need to add the following. How can I do this in a vue-cli 3 project?

resolve: {
    alias: {
      querystring: 'querystring-browser', // fix issue with aws4 (https://github.com/mhart/aws4/issues/46)
    }
  },

Also, is it possible to update the version of Wepback used in a vue-cli 3 project?


How to configure Vue CLI 3 to leverage webpack root folder aliases?
#2

This is documented here:

So what you would do is create a vue.config.js file at the root of you project, and add this code:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        querystring: 'querystring-browser'
      }
    }
  }
}

That will use webpack-merge to merge your piece of config into the existing config.

Using the more powerfull webpack-chain interface, this would look like this:

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('querystring', 'querystring-browser')
  }
}

If you intend on updating to webpack 4, you might want to hold out a little, we are still working on a fresh version for vue-loader that removes some edge case bugs.

but generally, you should be able to simply do:

npm install -D webpack@4

…but again, I can’t recommend that right now. It won’t be too long until we update the whole cli to webpack 4 though.


#3

Thanks so much for your extremely helpful reply. I really like the new approach to webpack config and I LOVE the new vue-cli in general. Will take your advice and hold off on webpack 4 for now.


#4

The current link appears to now be at https://cli.vuejs.org/guide/webpack.html