Vue CLI: modify webpack configuration – Dev Bay

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

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

Installation of Vue CLI, type in terminal opened in wanted directory:
npm install -g @vue/cli
Create Vue CLI application – type in terminal:
vue create app-name
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

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

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 – add new directory to dist folder

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') */

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:

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

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 🙂

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: