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


Posted in Javascript onJuly 30, 2019

前言

在项目开发中我们难免碰到需要对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的使用方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 命名规则 变量命名规则
Feb 25 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
js实现省市联动效果的简单实例
2014/02/10 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
浅谈Python反射 & 单例模式
2019/03/21 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
VC++笔试题
2014/10/13 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
导航工程专业自荐信
2014/09/02 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers