简述vue-cli中chainWebpack的使用方法

前言

在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpack简单的配置；用chainWebpack做高级配置；包括对loader的添加，修改；以及插件的配置

1、首先简单介绍一下webpack中loader的简单使用：

loader：是webpack用来预处理模块的，在一个模块被引入之前，会预先使用loader处理模块的内容，在你打包的时候对某些内容需要loader来处理一下，比如css模块；默认webpack只会处理js代码，所以当我们想要去打包其他内容时，就需要相应的loader去处理某些内容

使用方法：

在配置文件中webpack.config.js加入module属性，该属性是一个对象,在这个属性中有一个rules字段，先上代码

module:{    rules:[{      test://.js$/,      use:[{        loader:'babel-loader',        options: {        presets: [         "es2015", "react"        ],        plugins: ["syntax-dynamic-import"]     }      }]    }]  }

rules是一个数组，你所有的loader配置都可以写在这个数组里，每个loader配置是一个对象，匹配不同的规则；

test:test后是一个正则表达式，匹配不同的文件类型;

use:在这个规则中，当你匹配了这个文件后，需要使用相应的loader去处理这类型的文件，use接收的是一个数组，意味着当他匹配到文件后，它可以启用很多的loader去处理文件的内容；

如果使用的是loader的默认配置，可以写use:['css-loader','style-loader']；

如果是需要用到额外配置则需要写成对象，讲配置写在options里；

当然，还会有其他的一些属性比如（exclude、include等），这里就不再详细赘述

在你使用这些loader之前需要用npm去安装这些包；

2、用configureWebpack简单的配置；

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

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

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

// vue.config.jsmodule.exports = { configureWebpack: config => {  if (process.env.NODE_ENV === 'production') {   // 为生产环境修改配置...  } else {   // 为开发环境修改配置...  } }}

3、用chainWebpack做高级配置

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