如何在Vue-cli中配置Webpack？（适配无webpack.config.js场景）

Hey there! I get it—switching to Vue CLI can feel confusing when you’re used to a direct webpack.config.js file. Let’s break down how to apply your standard Webpack config in vue.config.js using the configureWebpack property.

Why No webpack.config.js? #

Vue CLI abstracts the raw Webpack config to simplify setup, so you won’t find a top-level webpack.config.js by default. Instead, it uses vue.config.js to let you customize the underlying Webpack setup via configureWebpack (or chainWebpack for more granular control).

Using configureWebpack in Two Ways #

There are two main patterns to use configureWebpack, depending on what you need to do:

1. Object Mode (Simple Overrides/Additions)

If you just need to add new Webpack settings or override specific defaults, pass a plain Webpack config object directly to configureWebpack. Vue CLI will merge this with its default config automatically.

Example:

// vue.config.js
const webpack = require('webpack')

module.exports = {
  // ... other existing config in your file
  configureWebpack: {
    // Standard Webpack config goes here
    plugins: [
      // Add a custom plugin
      new webpack.DefinePlugin({
        'process.env.MY_CUSTOM_VAR': JSON.stringify('hello-world')
      })
    ],
    // Modify output filename format
    output: {
      filename: '[name].[contenthash:8].js'
    },
    // Add resolve aliases
    resolve: {
      alias: {
        '@components': './src/components'
      }
    }
  }
}

2. Function Mode (Dynamic Modifications)

If you need to inspect or modify Vue CLI’s default Webpack config (like adjusting existing loaders, conditionally adding plugins), use a function. The function receives the default config as an argument—you can tweak it and return the modified version.

Example:

// vue.config.js
const webpack = require('webpack')

module.exports = {
  // ... other existing config
  configureWebpack: (config) => {
    // Optional: Log the default config to inspect its structure (great for debugging)
    // console.log('Default Webpack Config:', config)

    // Modify an existing loader rule (e.g., adjust Babel options)
    config.module.rules.forEach(rule => {
      if (rule.test.test('.js')) {
        rule.options.presets.push('@babel/preset-react') // Example addition
      }
    })

    // Add a new plugin conditionally
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new webpack.optimize.MinChunkSizePlugin({
          minChunkSize: 10000
        })
      )
    }

    // Return the modified config (or just mutate it—Vue CLI handles the rest)
    return config
  }
}

Key Notes #

• Merge Behavior: In object mode, your config will merge with Vue CLI’s defaults—if there’s a conflict, your settings take precedence. In function mode, you have full control over how you merge or modify the default config.
• Existing vue.config.js: If your enterprise boilerplate already has a vue.config.js, just add the configureWebpack property to the existing module.exports object (don’t replace the whole file unless you want to).

That should let you apply any standard Webpack config you need without a direct webpack.config.js file!

内容的提问来源于stack exchange，提问作者Hendrik Jan