webpack2.x基础属性讲解

摘要:
(即,使用webpack时需要对这些文件进行操作。)Entry可以传递字符串、数组、对象结构和函数返回值(不推荐),以分别定义条目设置。在webpack2。官方网站,设置条目使用的es6的箭头功能=>获得文件后,我们执行了一些操作,如编译、压缩和合并。最后,我们需要通过输出设置输出路径地址。
webpack作为构建工具平时作为前端作为优化、模块编程、和分片打包的重要组成部分,大家可能并不陌生,如果没有时刻的去关注文档,那么大家可能不太清楚webpack已经默默然的升级到2.x了,对比1.x版本,webpack2的文档结构和代码提示都非常友善。
webpack从1.x升到2版,并没有作为大的更改改动,而且内部的接口文档形式也与1基本无修改,那么对比webpack2版本 我们对webpack的主要属性做个简单的属性讲解
webpack2.x基础属性讲解第1张
 
首先第一个 webpack2.1后对声明引入webpack省略了 ,也就是说没有require('webpack')也可以正常运行,当然不是很建议,因为后在使用插件的时候需要显示调用webpack对象。
webpack2.x基础属性讲解第2张
context:解析和加载的初始路径,一般在不设置的情况下默认使用当前文件路径。(官方文档建议设置,这样可以独立于工作环境)
如何设置context的时候注意配置为全局路径,通过path进行设置。
webpack2.x基础属性讲解第3张
entry:程序入口,我们将要对文件处理的程序入口。(就是在使用webpack时要对那几个文件进行操作)
 
entry可以传递 string字符串、数组、对象结构、函数返回值(不建议)分别定义入口设置。
webpack2.x基础属性讲解第4张
那么在webpack2.的官网上 函数设置entry使用的es6的箭头函数=>与普通函数功能对等
 
------------------------------------我是华丽的分割线---------------------------------
 
output:webpack程序操作后的出口配置信息。我们获取文件后进行了一些操作~如编译、压缩、合并后最终需要通过output设置输出的路径地址。
 
output下的属性配置:
 
filename:输出文件的名称信息。允许自定义或者通过[id]/[hash]进行占位
webpack2.x基础属性讲解第5张
publicPath:指定输出文件的公共Url.(反正生番过来的) 编译文件中存在src或url时进行设置。
在webpack进行编译时,如果我们在入口文件entry的内部,使用带有src的路径引用,如css的url或html的路径,javascript标签的引用,那么就会造成编译失败,因为物理内存的路径和当前路径是不同的,所以publicPath通常作为文件的href或url来进行设置,名称随意 不要太奇怪就好。
 
chunkFilename:用于未配置在entry中,但是通过import或require依赖关系加载进来的模块进行命名。如果不进行设置也可以,但是会随机命名,可读性差。另外chunkFilename也常用于提取公共模块。
chunkFilename可以设置格式为 [id].js / [name].js / [hash].js 分别代表模块的索引或名称 (我使用name测试一直失败,默认给的是数字)
程序配置:
webpack2.x基础属性讲解第6张
js编写 => 我这里使用的es6编写方式 如果使用require模块也是可以的 但是注意书写格式
webpack2.x基础属性讲解第7张

webpack2.x基础属性讲解第8张

hotupdatechunkFilename: 自定义热更新模块(高级设置 与热键部署一块讲)
 
library: 用来设置导出的包的名称 (后期例子讲解)
 
libraryTarget:对导出包的格式进行设置 (后期例子讲解)

----------------------------------------------我是分割线--------------------------------------------------------

modules下的属性:
noParse: regExp|[RegExp]
设定webpack在解析时,不解析的路径结构,格式为正则,在构建大的项目时吗,可以提高效率
 
rules: []
定义解析规则,通过配置,对文件进行编译处理。
 
rule:规则可以分为三块内容 条件 结果 和嵌套规则
 
rule:{
test:/.js/
enforce:'pre',
include:[path.resolve(__dirname,'js/app')]
exclude:[],
loader|loaders =>在webpack1 设置加载器
oneof:'',
options:[],
query:[],
parser:{}
resource:'/app/',
resouceQuery:/userName/,
use:[]
}
 
test: 匹配要处理的文件格式,正则格式.(test是resouce的简写形式)
enforce:加载器的执行顺序,不设置为正常执行。可选值 'pre|post' 前|后
include:将要处理的目录包括进来
exclude:排除不处理的文件目录,可以使数组或字符串正则格式
issuer:条件的发起者
loader:一个简写的rule.use,既然已经升级了 个人不建议继续使用
loaders:一个数组结构rule.use的别名 同上
oneOf:匹配规则时,只使用第一匹配的数组
options|query:都是rule.use的简写 (保留了好多1的东西 有点用不惯)
parser:解析器选项对象(暂时没用到过,东西很多 可以去官网看看)
resource:与资源匹配的条件,可以使用正则。例子中匹配资源内部 含有app的文件 如 app.js | demoapp.js
resourceQuery:与资源查询匹配的条件,匹配资源?后面的字段 如 app.js?userName
use:一个数组结构用于作为程序解析器的入口路径 (真抱歉 我特么没办法好好get这个英文的真实意义)
我们就理解use用来作为引用加载器函数的入口配置吧
 
哈 属性稍微多了点 我们拿几个简单的例子讲解
//1.基础配置格式
webpack2.x基础属性讲解第9张
使用模块化编程解析css样式 注意 style-loader必须在前
webpack2.x基础属性讲解第10张
注:webpack 默认对es6中的import模块是支持的,但是对于let const变量和其他的编译不进行解析的,因为webpack认为es6是个号的姑娘,咳咳 是好的语言,所以无需为其转换 我们默认使用即可,所以在低版浏览器需还是需要进行转换的
 webpack2.x基础属性讲解第11张

github代码例子: https://github.com/kingnuoyan/webpack

免责声明:文章转载自《webpack2.x基础属性讲解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vite尝鲜-最新代码原理分析css实现字体小于12px下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

MAC下go语言的安装和配置

Mac下安装一些文件都是比较简单的。安装了brew以后,很多的程序只要一条命令就搞定了。 brew install go 安装好go语言以后主要是配置go_path,和go_root的地址。 go_root   其实就是golang的安装路径 go_path  是代码存放的地址一般在src目录下写代码。go build 编译代码时,会默认区src下寻找。...

asp.net2.0导出pdf文件完美解决方案(转载)

      PDF简介:PDF(Portable Document Format)文件格式是Adobe公司开发的电子文件格式。这种文件格式与操作系统平台无关,也就是说,PDF文件不管是在Windows,Unix还是在苹果公司的Mac OS操作系统中都是通用的。这一特点使它成为在Internet上进行电子文档发行和数字化信息传播的理想文档格式。越来越多的电子...

三、Electron + Webpack + Vue 搭建开发环境及打包安装 ---- 打包electron应用

目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + Webpack + Vue 搭建开发环境及打包安装 ---- 打包electron应用 三、打包Election App 应用   在之前的节中已经写...

文件加锁(基于FileChannel)

      JDK1.4引入了文件加锁机制。它允许我们同步访问某个作为共享资源的文件。不过,竞争同一文件的两个线程可能在不同的Java虚拟机上,或者一个是Java线程,另一个是操作系统中的其他的某个本地线程。文件加锁对其他的操作系统进程是可见的,因为Java的文件加锁直接映射到了本地操作系统的枷锁工具。       通过对FileChannel调用tryL...

【jmeter】NO-GUI模式运行的过程及报错解决方法(转)

1.什么都不需要设置(若非得想配置点什么的话,那请看备注) 2.将脚本抛到Linux里 3.执行 jmeter -n -t /opt/day7_buildbug.jmx -l result.jtl -e -o /opt/resultreport 参数解释: -n :以非GUI形式运行Jmeter -t :source.jmx 脚本路径 -l :resul...

浅谈webpack4.0 性能优化

前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化,所以实际应用中,我们可以把精力更多专注在业务层面上,而无需分心于项目构建上的优化。然而从学习者的角度,我们需要了解webpack在项目...