Vue CLI webpack related

simple configuration

The easiest way to adjust the webpack configuration is to provide an object in the configureWebpack option in vue.config.js:

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

This object will be   merged into the final webpack configuration by webpack-merge .

warn

Some webpack options are set based on values ​​in vue.config.js and so cannot be modified directly. For example, you should modify the outputDir option in vue.config.js instead of modifying output.path; you should modify the publicPath option in vue.config.js instead of modifying output.publicPath. This is done because the values ​​in vue.config.js are used in multiple places in the configuration to make sure everything works together.

If you need to conditionally configure behavior based on the environment, or want to modify the configuration directly, replace it with a function (which will be executed lazily after the environment variable is set). The first parameter of this method will receive the parsed configuration. Inside the function, you can modify the configuration directly, or return an object that will be merged:

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

Chaining Operations (Advanced)

The webpack configuration inside Vue CLI is   maintained via webpack-chain . This library provides an upper-level abstraction of webpack's original configuration, allowing it to define named loader rules and named plugins, and to have the opportunity to enter these rules and modify their options later.

It allows us finer-grained control over its internal configuration. Following are some common examples of chainWebpack modifications in vue.config.js.

hint

vue inspect  can be very helpful when you intend to chain access to a specific loader .

Modify Loader options

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

hint

For CSS-related loaders, we recommend using  css.loaderOptions  instead of directly chaining loaders. This is because there are multiple rules for each CSS file type, and css.loaderOptions ensures that you affect all of them in one place.

Add a new Loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

Replace Loader in a rule

If you want to replace an existing base loader , for example for inline SVG files use vue-svg-loader instead of loading this file:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

Modify plugin options

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

You'll need to be familiar with  the webpack-chain API  and read some source code to understand how to get the most out of this option, but it's more expressive and safer than modifying the webpack configuration directly.

Let's say you want to change the default path of index.html from /Users/username/proj/public/index.html to /Users/username/proj/app/templates/index.html. By referring to  html-webpack-plugin  you can see a list of options that can be passed. We can change this by passing in a new template path in the following configuration:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args
      })
  }
}

You can confirm changes with vue inspect, the tool discussed next.

Review the project's webpack configuration

Because @vue/cli-service abstracts the webpack configuration, it can be difficult to understand what is contained in the configuration, especially if you plan to adjust it yourself.

vue-cli-service exposes the inspect command to inspect parsed webpack configuration. The global vue executable also provides the inspect command, which simply delegates vue-cli-service inspect to your project.

This command will print the parsed webpack configuration, including chain access rules and plugin prompts to stdout.

You can redirect its output to a file for viewing:

vue inspect > output.js

Note that the output is not a valid webpack config file, but a serialized format for inspection.

You can also inspect a small part of the configuration by specifying a path:

# 只审查第一条规则
vue inspect module.rules.0

Or point to the name of a rule or plugin:

vue inspect --rule vue
vue inspect --plugin html

Finally, you can list the names of all rules and plugins:

vue inspect --rules
vue inspect --plugins

Use the parsed configuration as a file

Some external tools may need to access the parsed webpack configuration through a file, such as those IDEs or CLIs that need to provide the webpack configuration path. In this case you can use the following path:

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

This file is dynamically parsed and outputs the same webpack configuration used in the vue-cli-service command, including those from plugins and even your own custom configuration.