在vue项目中扩展webpack配置

首先在项目根目录中新建一个名为vue.config.js文件:

1、一种方法是直接在 vue.config.js 中的 configureWebpack 选项提供一个对象，该对象将会被 webpack-merge 合并进最终的 webpack 配置。

module.exports = {
  configureWebpack: {
    plugins: [
      new myWebpackPlugin()
    ]
  }
}

2、如果想要直接修改配置，可以换成一个函数。该函数的第一个参数会收到已经解析好的配置。在该函数内，你可以直接修改配置。

module.exports = {
  configureWebpack: config => {
    
  }
}

3、在使用Vue CLI创建的vue项目里，Vue CLI内部的 webpack 配置是通过 webpack-chain 维护的。我们可以通过以下方式扩展webpack配置
例如：起别名、解决跨域问题

const path = require('path')
module.exports = {
    chainWebpack: config => {
      //起别名
      config.resolve.alias 
        .set('components',path.resolve(__dirname,'./src/components'))
    },
    //解决跨域问题
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:9000',
          changeOrigin: true,
          pathRewrite:{
            '^/api':''
          }
        }
      }
    }
}