[Vue CLI 3] 源码之 webpack-chain
我们看一下 webpack-chain 到底做什么?
Use a chaining API to generate and simplify the modification of Webpack version 2-4 configurations.
熟悉 cli-plugin-babel
、cli-plugin-eslint
源码的话,你会时常看到它。
如何使用呢?
1、加载它
const Config = require('webpack-chain');
2、调用 new
const config = new Config();
后面就是一个一个的方法介绍和使用了:
第一个:entry
设置
config
.entry('index11').add('src/index11.js').end().entry('index22').add('src/index22.js').end()
我们调用如下方法看看:
config.toString()
打印一下:
{entry: {index11: ['src/index11.js'],index22: ['src/index22.js']}
}
第二个:plugin
设置
参考:cli-service/lib/config/app.js
格式如下:
config.plugin(name).use(WebpackPlugin, args)
const HTMLPlugin = require('html-webpack-plugin')const htmlOptions = {templateParameters: (compilation, assets, pluginOptions) => {},template: '/Users/***/public/index.html'
}webpackConfig.plugin('html').use(HTMLPlugin, [htmlOptions])
我们调用如下方法看看:
config.toString()
打印一下:
plugins: [/* config.plugin('html') */new HtmlWebpackPlugin({templateParameters: function () { /* omitted long function */ },template: '/Users/***/public/index.html'})
]
第三个:module
设置
这里方法比较多,用到了
- rule 对应 rules: []
- test(/.js$/) 对应 test: /\.js$/
- include.add('src') 对应 include: ['src']
- use('eslint') 对应 use: []
- loader('eslint-loader') 对应 loader: 'eslint-loader'
测试地址:https://runkit.com/embed/5tiz...
config.module.rule('lint').test(/\.js$/).pre().include.add('src').end()// Even create named uses (loaders).use('eslint').loader('eslint-loader').options({rules: {semi: 'off'}});
我们调用如下方法看看:
config.toString()
打印一下:
{module: {rules: [/* config.module.rule('lint') */{test: /\.js$/,enforce: 'pre',include: ['src'],use: [/* config.module.rule('lint').use('eslint') */{loader: 'eslint-loader',options: {rules: {semi: 'off'}}}]}]}
}
第四个:devServer
设置
config.devServer.set('hot', true);
config.devServer.hot(true)
我们调用如下方法看看:
config.toString()
打印一下:
{devServer: {hot: true}
}
[Vue CLI 3] 源码之 webpack-chain相关推荐
- [Vue CLI 3] 源码系列之useTaobaoRegistry
通过下列方式可以安装最新版本的 Vue CLI(注释:sudo 自行选择) sudo npm install -g @vue/cli 然后通过下列命令创建项目: vue create demo 这时候 ...
- 简单介绍Vue之vue.$set()方法源码案例
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下 在使用vue开发项目的过程中,经常会遇到这样 ...
- vue的matcher_一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 2. Vue 全家桶 先来张 Vue 全家桶 总图: 3. Vue 细分如下 源码 ...
- java计算机毕业设计vue水果商城源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue水果商城源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue水果商城源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B/S架构 ...
- 计算机毕业设计-ssm+vue宿舍管理系统源码-宿舍维修管理系统javaweb项目
计算机毕业设计-ssm+vue宿舍管理系统源码-宿舍维修管理系统javaweb项目 注意:该项目只展示部分功能,如需了解,评论区咨询即可. 作者:IT跃迁谷 1.开发环境 开发语言:Java 后台框架 ...
- JAVA计算机毕业设计旅游网站vue(附源码、数据库)
JAVA计算机毕业设计旅游网站vue(附源码.数据库) 目运行 环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(I ...
- java计算机毕业设计vue图书管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue图书管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue图书管理系统源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B ...
- java计算机毕业设计vue宿舍管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue宿舍管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue宿舍管理系统源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B ...
- java计算机毕业设计vue教学管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue教学管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue教学管理系统源码+mysql数据库+系统+lw文档+部署 本源码技术栈: 项目架构:B ...
最新文章
- 计算机专业每年都有国企招老吗,这十大专业在国企中最受欢迎,待遇高、前景好,有你的专业吗?...
- 微软 WinGet 抄袭 AppGet 始末,个人开源的困境该如何破?
- 从四个层面落地,成为受欢迎、可信赖、懂技术的产品经理
- 正高变副高!高校实施“职称退步”?
- linux unix mac windows,文件路径-windows上的反斜杠和Mac OS/Linux/Unix上的正斜杠,Windows,倒,以及,macOSLinuxUNIX...
- U盘安装Ubuntu14.04 server版 提示无法挂载cd-rom数据的解决办法
- Leetcode刷题之旅1
- HCIA RS题库及解析(2018版)
- burpsuite配置
- 商业方向的大数据专业_工业大数据应用的三大挑战和五大商业趋势
- 紫光同创 FPGA 开发跳坑指南(五)—— DDR3 控制器 IP 的仿真
- 京东云linux查看挂载磁盘,使用S3fs在Linux实例上挂载Bucket
- 茶文化网页代码(详细解释)
- 科学的工作方法—PDCA循环工作法
- STK中卫星三维模型的建立
- Docker容器无法启动,里面的配置文件如何修改
- 集群、分布式、负载均衡区别(转)
- Visual Studio 好用的插件
- java调用百度内容审核接口检查文本
- Java IO流 - 字节流的使用详细介绍