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

来源：jb51　　时间：2019/7/31 8:36:26　　对本文有异议

前言

在项目开发中我们难免碰到需要对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.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 }
}

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

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

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

3、用chainWebpack做高级配置

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

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

官方文档给我提供了一些简单的示例：

修改 Loader 选项

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
     // 修改它的选项...
     return options
    })
 }
}

添加一个新的 Loader

// vue.config.js
module.exports = {
 chainWebpack: config => {
  // GraphQL Loader
  config.module
   .rule('graphql')
   .test(/\.graphql$/)
   .use('graphql-tag/loader')
    .loader('graphql-tag/loader')
    .end()
 }
}

替换一个规则里的 Loader，

// 添加svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .tap(options => {
    options = {
     symbolId: 'icon-[name]'
    }
    return options
   })

修改插件的代码可以看下面的例子；

先上代码，今天主要讲我们项目中配置，配置的api地址： https://cli.vuejs.org/zh/conf...

const path = require('path')
const webpack = require('webpack')
module.exports = {
 // 修改output.path
 outputDir: 'dist',
 // 修改output.publishPath
 publishPath: './',
 chainWebpack: config => {
  // 添加全局scss文件
  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  types.forEach(type => { //匹配到所有需要导入的文件
   config.module.rule('scss').oneOf(type).use('style-resource')
    .loader('style-resources-loader')
    .options({
     patterns: [
      path.resolve(__dirname, 'src/css/base.scss')
     ]
    })
  })
  // 添加svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .tap(options => {
    options = {
     symbolId: 'icon-[name]'
    }
    return options
   })
  // 移除 prefetch 插件 //预加载
  config.plugins.delete('prefetch')
  // 引入
  const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : '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`))
    }
    return options
   })
  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`)
    }
    return options
   })
 }
}

上述代码里使用了style-resources-loader，可以自动化导入文件；

DllReferencePlugin这个插件是为了使第三方以来和我们自己编写的代码分开打包，提升打包速度；需要和add-asset-html-webpack-plugin这个插件一起使用；

使用这个插件打包后，在src/common_chunk这个文件夹下生成工具库，将第三方依赖打包到一个文件里，并生成一个所有库代码的一个索引manifest.json文件

ps:全局引入公共样式文件的另一种方法，这样也可以直接在使用公共样式了；

module.exports = {
 // ...
 css: {
  loaderOptions: {
   sass: {
    // 根据自己样式文件的位置调整
    data: `@import "@src/css/base.scss";`
   }
  }
 }
};

总结

以上所述是小编给大家介绍的vue-cli中chainWebpack的使用方法 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

友情链接：直通硅谷　点职佳　北美留学生论坛

webpack热门文章

最新 umi4-max 如何使用 webpack5 联邦模块

使用webpack配置react-hot-loader热加载局部更新

vue-cli3+ts+webpack实现多入口多出口功能

JS逆向实战21——某查查webpack密码加密

使用webpack打包ts代码的实现

详解webpack之图片引入-增强的file-loader：url-loader

webpack的移动端适配方案小结

webpack拆分压缩css并以link导入的操作步骤

详解Webpack loader 之 file-loader

详解webpack+ES6+Sass搭建多页面应用

webpack推荐文章

Webpack 学习笔记

最新 umi4-max 如何使用 webpack5 联邦模块

自学 TypeScript 第三天使用webpack打包 TS 代码

使用webpack打包ts代码的实现

vue-cli webpack配置文件分析

webpack-mvc 传统多页面组件化开发详解

使用 Webpack 分离数据的正确方法

新手快速上手webpack4打包工具的使用详解

一次Webpack配置文件的分离实战记录

详解Webpack loader 之 file-loader