vue项目中vue.config.js中配置webpack详解

在Vue项目中，vue.config.js是一个可选的配置文件，如果项目的构建系统检测到这个文件存在，会自动使用它的配置选项。以下是如何在vue.config.js中配置Webpack的一个示例：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
 
  // 输出文件目录
  outputDir: 'dist',
 
  // 静态资源目录 (js, css, img, fonts)
  assetsDir: 'assets',
 
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
 
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false
  },
 
  // devServer 代理设置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      // 配置跨域处理 可以设置你想要代理的接口
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
 
  // 插件选项
  pluginOptions: {
    // ...
  },
 
  // configureWebpack 或 chainWebpack 调整内部webpack配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境的配置
      config.plugins.push(new MyAwesomePlugin());
    } else {
      // 开发环境的配置
      config.devtool = '#source-map';
    }
  },
 
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      if (process.env.NODE_ENV === 'production') {
        // 修改生产环境的HTML插件参数
        // 例如：args[0].minify.removeComments = true;
      }
      return args;
    });
 
    // 添加新的webpack规则
    config.module
      .rule('my-rule')
      .test(/\.my-file$/)
      .use('my-loader')
        .loader('my-loader-path')
        .end();
  }
};

这个配置文件展示了如何设置基本路径、输出目录、静态资源目录、是否生成source map文件、开启CSS分离插件、设置开发服务器的主机、端口、HTTPS、自动打开浏览器、代理设置、插件选项以及如何使用configureWebpack和chainWebpack来调整内部的Webpack配置。