Vue CLI webpack related

Simple configuration

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

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

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

Warning

Some webpack options are based on value settings .js vue.config, so they cannot be modified directly. F or example, you should modify the outputDir .js in the vue.config .js instead of the output.publicPath option in the vue.config .js. This is done because the values in .js vue.config are used in multiple places in the configuration to ensure that all the parts work together.

If you need to configure behavior conditionally based on the environment, or if you want to modify the configuration directly, replace it with a function (which lazyly executes after the environment variable is set). T he first argument to the method receives a configured configuration that has already been resolved. Within 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 {
      // 为开发环境修改配置...
    }
  }
}

Chain operation (advanced)

The webpack configuration within the Vue CLI is maintained through the webpack-chain. This library provides an upper-level abstraction of the original configuration of the webpack, allowing it to define named loader rules and named plug-ins and have the opportunity to enter them later and modify their options.

It allows us to control its internal configuration in a more granular way. Next, there are some common examples of chainWebpack modifications .js vue.config.

Tips

vue inspect can be very helpful when you are planning to chain access to a particular loader.

Modify the Loader option

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

Tips

For CSS-related loaders, we recommend using css.loaderOptions instead of directly chaining the designation of loader. This is because each CSS file type has multiple rules, and css.loaderOptions ensures that you affect all rules 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 underlying loader, for example, use vue-svg-loader for an inline SVG file instead of loading it:

// 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 the plug-in options

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

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

For example, you want to change the .html path of the index from /Users/username/proj/public/index.html to /Users/username/proj/app/templates/index.html. B y refer to html-webpack-plugin you can see a list of options that can be passed in. We can pass in a new template path in the following configuration to change it:

// 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 the change by using the tool vue inspect to be discussed next.

Review the project's webpack configuration

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

vue-cli-service exposes the inspect command used to review the parsed webpack configuration. That global vue executable also provides the inspect command, which simply agents vue-cli-service inspect into your project.

The command prints the resolved webpack configuration, including chain access rules and plug-in prompts, to stdout.

You can redirect its output to a file for review:

vue inspect > output.js

Note that it outputs not a valid webpack profile, but a serialized format for review.

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

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

Or point to the name of a rule or plug-in:

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

Finally, you can list the names of all the rules and plug-ins:

vue inspect --rules
vue inspect --plugins

Use the parsed configuration as a file

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

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

The file dynamically parses and outputs the same webpack configuration used in the vue-cli-service command, including those from plug-ins or even your customization.