Press "Enter" to skip to content

Vue CLI: modify webpack configuration

When using Vue CLI sometimes we must change how it is working in background. I mean what are the bundling rules, how server works etc. We must know that Vue CLI uses in background the Webpack with quite sophisticated settings. But we can use dive into that and change whatever we want.

Let’s go step by step from the beginning.

  1. Installation of Vue CLI, type in terminal opened in wanted directory:
    npm install -g @vue/cli
  2. Create Vue CLI application – type in terminal:
    vue create app-name
  3. Net we must answer a few questions, but without any problem we can choose the default options.
  4. When installed – we can start building out VueJS application by typing in terminal:
    npm run servewhat will simply run the server with our app in the background and we will be able to access it via URL like, in my case: http://localhost:8081

    Vue CLI run local server
    Vue CLI run local server
  5. Let’s now change the Webpack settings. To do that create file: vue.config.js
  6. Very important! To change webpack settings we must know what are the current settings, yeah?
    To do that we must add one new rule to npm scripts in package.json file in project root directory: "inspect": "vue-cli-service inspect > current-webpack-settings.json",

    Vue CLI inspect current webpack settings
    Vue CLI inspect current webpack settings

    And run following command in terminal:
    npm run inspect

    Then check output current-webpack-settings.js file in root directory which will look more or less liek on image below:

    Vue CLI inspect current webpack settings
    Vue CLI inspect current webpack settings

     

CASE 1 – Vue CLI Webpack change:

  1. we want to change webpack rule responsible for copy of files to /dist directory during the build npm run build command then we are looking for the plugin responsible for that by checking the comments and we can find that there is /* config.plugin('copy') */
  2. We can change the its code by using webpack-chain rules, so we use the following code:
    module.exports = {
    chainWebpack: config => {
        config
          .plugin('copy')
          .tap(value => {
            value[0].push({
              from: 'C:\\projects\\vue-cli\\public-assets',
              to: 'C:\\projects\\vue-cli\\dist',
              toType: 'dir'
            });
            
          })
      }
    }
    

    And this modification will change npm run build command and will copy to /dist directory also asset files from directory /public-assets.

CASE 2 – Vue CLI Webpack change:

  1. Let’s change the name of output /dist folder name into /dist-local. Code of that will be easy, and here we do not use the webpack-chain but we write simply:
    module.exports = {
      outputDir: 'dist-local'
    }
    

CASE 3 – Vue CLI Webpack change:

  1. Let’s add a new webpack plugin. First we must instal it by command npm install –save-dev WEBPACK_PLUGIN_NAME
  2. And next, extend the content of vue.config.js file by the following code:
    module.exports = {
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      }
    }
    

     

And this is the end. I descriebed in above examples a 3 different cases how we can modify the Webpack settings under the Vue CLI. Here you can find official docs on Vue CLI project page. I hope that this is the right starting point for you and you will be able now to modify that as you whish 🙂