Mohit Bajoria

Software Developer

Tweaking Webpack configuration using Vue CLI 3

May 23, 2018


Recently i upgraded to Vue CLI 3 and totally in love with the flexibility it provides, This post will cover how you can tweak your webpack configuration if you are using Vue CLI 3

Vue CLI 3

vue --version it will give you the version which of vue-cli you are using, If you are not using > 3 version then you can do npm install -g @vue/cli   or   yarn global add @vue/cli, it will install the latest version of vue-cli

Now you are ready to create a new Vue project using vue-cli 3

vue create

vue create <project-name> it will create a new project and are ready to go out of the box. The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts.

vue.config.js

Many a times, we want to tweak our webpack configuration according to use case, Unlike React you don't have to eject here to change the webpack configuration, This is the one of the power of vue cli 3, you just need to create a new vue.config.js file in your root directory

This file should export a object, example -

module.exports = {
    lintOnSave:true
}

Now if you want to change the webpack dev server behaviour, then

module.exports = {
    devServer: {
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 7000,
      https: false,
      hotOnly: false,
      proxy: null, // string | Object
      before: app => {}
    }
}

This can totally be acheived without ejecting any configuration.

If you want to change default webpack configuration, then

module.exports = {
    configureWebpack: {
        entry: 'path/to/entry/file`
        //other options
    }
}

This was just a small write up about Vue CLI 3 and changing default webpack configuration, you can find more on Vue CLI 3 docs here


SetTimeout vs nextTick in VueJS

Understanding hello world program in go

homegithubtwitter