vue-cli开发工具，集成了webpack 和bable等工具；

开发时候，更改了代码能实现热更新页面效果；

vue-cli工具把webpack配置参数，统一在vue.config.js里面；

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

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

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

另外

在vue-config.js里面采用链式操作更改webpack参数：

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。

有时候我们在项目中会需要频繁引入同一个路径的文件，如果需要引入的次数特别多，我们就得在每一次引入都要写一长串的地址，那么我们有没有什么方法可以偷点懒呢，我们可以通过调整webpack里的配置达到“偷一点小懒”的目的。

我们来看看webpack工具的配置文件原版是怎么配置的：

resolve.alias这个配置项相当于为文件目录配置一个别名

使用resolve.alias配置的用法如下

在 webpack.config.js 文件

module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'
  },
  resolve:{
    //配置别名，在项目中可缩减引用路径
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '&': resolve('src/components'),
      'api': resolve('src/api'),
      'assets': resolve('src/assets')
    }
  },
  plugins: [
   
  ]
};

更换到vue-config.js 里面用链式操作更改alias参数的方法：

//vue-config.js
module.exports = {
    publicPath: './',
    pages: {
        index: {
            entry: 'layout/src/main.js',
            template: 'layout/public/index.html',
        }
    },
    outputDir: 'src/renderer',
    productionSourceMap: false,
    chainWebpack: (config) => {
 //这里是调整webpack的 参数，效果类似直接修改webpack里面的alias参数；
        config.resolve.alias
            .set('@', resolve('layout/src'))
    }
}

好了，本文全部内容结束，感谢您的阅读，希望能帮助到您。