前言在项目开发中，我们难免会遇到需要更改webpack配置的情况。今天主要讲一下vue.config.js中的一些配置变化，简单介绍下loader用configureWebpack进行简单配置；使用chainWebpack进行高级配置；包括添加和修改装载机；以及插件的配置，在引入模块之前，会使用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：在这个rule中，当你匹配到这个文件的时候，需要使用对应的loader来处理这个类型的文件，use接收一个数组，也就是说当它匹配到这个文件的时候，可以开启很多loader来处理内容文件的；如果使用loader的默认配置，可以写use:['css-loader','style-loader'];如果你需要使用额外的配置，你需要写成一个对象，在options里面写配置；当然还会有（exclude,include等）其他属性，这里就不赘述了。在使用这些加载器之前，您需要使用npm安装这些包；2.使用configureWebpack简单配置；/vue.config.jsmodule.exports={configureWebpack:{plugins:[newMyAwesomeWebpackPlugin()]}}如果你需要根据环境有条件地配置行为，这个对象会被webpack-merge合并到最终的webpack配置中，或者想直接修改配置，然后换成函数（函数会在设置环境变量后懒惰执行）。此方法的第一个参数将接收已解析的配置。在函数内部，你可以直接修改配置，或者返回一个将被合并的对象：//vue.config.jsmodule.exports={configureWebpack:config=>{if(process.env.NODE_ENV==='production'){//修改生产环境的配置...}else{//修改开发环境的配置...}}}3.使用chainWebpack进行高级配置VueCLI内部的webpack配置是通过webpack维护的-链。这个库提供了webpack原始配置的上层抽象，允许它定义命名加载器规则和命名插件，并有机会进入这些规则并在以后修改它们的选项。它允许我们对其内部配置进行更细粒度的控制。以下是vue.config.js中chainWebpack修改的一些常见示例。官方文档给了我一些简单的例子：modifyLoaderoptions//vue.config.jsmodule.exports={chainWebpack:config=>{config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options=>{//修改它的选项...返回选项})}}添加一个新的Loader//vue.config.jsmodule.exports={chainWebpack:config=>{//GraphQLLoaderconfig.module.rule('graphql').test(/\.graphql$/).use('graphql-tag/loader').loader('graphql-tag/loader')。end()}}替换规则中的Loader，//添加svg-sprite-loaderconstsvgRule=config.module.rule('svg')svgRule.uses.clear()svgRule.use('svg-sprite-loader').loader('svg-sprite-loader').tap(options=>{options={symbolId:'icon-[name]'}returnoptions})修改插件的代码，可以看以下示例；codefirst，今天主要说一下我们项目中的配置，配置的api地址：https://cli.vuejs.org/zh/conf...constpath=require('path')constwebpack=require('webpack')模块e.exports={//修改output.pathoutputDir:'dist',//修改output.publishPathpublishPath:'./',chainWebpack:config=>{//添加全局scss文件consttypes=['vue-modules','vue','normal-modules','normal']types.forEach(type=>{//匹配所有需要导入的文件config.module.rule('scss').oneOf(type).使用('style-resource').loader('style-resources-loader').options({patterns:[path.resolve(__dirname,'src/css/base.scss')]})})//添加svg-sprite-loaderconstsvgRule=config.module.rule('svg')svgRule.uses.clear()svgRule.use('svg-sprite-loader').loader('svg-sprite-loader').tap(options=>{options={symbolId:'icon-[name]'}returnoptions})//删除预取插件//预加载config.plugins.delete('prefetch')//引入constchunkFolder=process.env。NODE_ENV!=='生产'?'调试'：'dist'config.plugin（'dll-reference-plugin').use(webpack.DllReferencePlugin).tap(options=>{options[0]={context:__dirname,manifest:require(path.join(__dirname,`./src/common_chunk/${chunkFolder}/manifest.json`))}返回选项})config.plugin('add-asset-html-webpack-plugin').use('add-asset-html-webpack-plugin').tap(options=>{options[0]={filepath:path.resolve(__dirname,`./src/common_chunk/${chunkFolder}/lib_*.js`)}returnoptions})}}上面代码使用了style-resources-loader，可以自动导入文件；添加svg-sprite-loader的目的是将svg图片转换成svg标签插入到html中，这样我们就可以使用类似下面的方法。webpack默认处理svg的loader是file-loader，所以需要去掉这个配置：DllReferencePlugin插件是为了把第三方写的代码和我们自己写的代码分开，提高打包速度；需要配合add-asset-html-webpack-plugin插件使用；使用本插件打包后，在src/common_chunk文件夹下生成一个工具库，将第三方依赖打包成一个文件，生成所有库代码的索引manifest.json文件ps：另一种方式引入public全局样式文件，这样你也可以直接使用public样式；module.exports={//...css:{loaderOptions:{sass:{//根据自己样式文件的位置调整数据：`@import"@src/css/base.scss";`}}}};本文引用的文档：https://cli.vuejs.org/zh/guid...
