Menu
Dev Bay – front-end tips
  • Front-end tips
  • Back-end tips
  • Converters
Dev Bay – front-end tips

Vue CLI: modify webpack configuration

Posted on March 28, 2021July 27, 2022

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.

Table of Contents

  • Create new empty Vue CLI project
  • Webpack configuration in Vue CLI project
  • Vue CLI – add new directory to dist folder
  • Vue CLI – change dist path and folder
  • Vue CLI – add new Webpack plugin:
    • Related posts:

Create new empty Vue CLI project

Let’s go step by step from the beginning of Vue CLI project installation.

  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.

When Vue CLI new project is installed – we can start building out VueJS application by typing in terminal:
npm run serve

What 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

Webpack configuration in Vue CLI project

Let’s now change default Webpack cofiguration in Vue CLI project. To do that create file: vue.config.js in project root directory.

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 to check the current Vue CLI Webpack configuration:
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

Vue CLI – add new directory to dist folder

  1. We want to change Vue CLI Webpack configuration 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.

Vue CLI – change dist path and folder

Let’s change in the Vue CLI Webpack configuration 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'
}

Vue CLI – add new Webpack plugin:

  1. Let’s add a new Webpack plugin by modifying the Vue CLI Webpack configuration. First we must install 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 described in above examples a 3 different cases how we can modify the Vue CLI ‘s Webpack configuration. 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 wish 🙂

Related posts:

FIREBASE: integrate ADMIN SDK with NodeJS back-end API VueJS – loading spinner component MySQL – change next auto increment value
©2023 Dev Bay – front-end tips | Powered by SuperbThemes & WordPress