webpack作为构建工具平时作为前端作为优化、模块编程、和分片打包的重要组成部分,大家可能并不陌生,如果没有时刻的去关注文档,那么大家可能不太清楚webpack已经默默然的升级到2.x了,对比1.x版本,webpack2的文档结构和代码提示都非常友善。
webpack从1.x升到2版,并没有作为大的更改改动,而且内部的接口文档形式也与1基本无修改,那么对比webpack2版本 我们对webpack的主要属性做个简单的属性讲解

首先第一个 webpack2.1后对声明引入webpack省略了 ,也就是说没有require('webpack')也可以正常运行,当然不是很建议,因为后在使用插件的时候需要显示调用webpack对象。

context:解析和加载的初始路径,一般在不设置的情况下默认使用当前文件路径。(官方文档建议设置,这样可以独立于工作环境)
如何设置context的时候注意配置为全局路径,通过path进行设置。

entry:程序入口,我们将要对文件处理的程序入口。(就是在使用webpack时要对那几个文件进行操作)
 
entry可以传递 string字符串、数组、对象结构、函数返回值(不建议)分别定义入口设置。

那么在webpack2.的官网上 函数设置entry使用的es6的箭头函数=>与普通函数功能对等
 
------------------------------------我是华丽的分割线---------------------------------
 
output:webpack程序操作后的出口配置信息。我们获取文件后进行了一些操作~如编译、压缩、合并后最终需要通过output设置输出的路径地址。
 
output下的属性配置:
 
filename:输出文件的名称信息。允许自定义或者通过[id]/[hash]进行占位

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测试一直失败,默认给的是数字)
程序配置:

js编写 => 我这里使用的es6编写方式 如果使用require模块也是可以的 但是注意书写格式

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.基础配置格式

使用模块化编程解析css样式 注意 style-loader必须在前

注:webpack 默认对es6中的import模块是支持的,但是对于let const变量和其他的编译不进行解析的,因为webpack认为es6是个号的姑娘,咳咳 是好的语言,所以无需为其转换 我们默认使用即可,所以在低版浏览器需还是需要进行转换的
 

后期补上github地址例子

webpack2.x基础属性讲解(一)的更多相关文章

  1. webpack2.x基础属性讲解

    webpack作为构建工具平时作为前端作为优化.模块编程.和分片打包的重要组成部分,大家可能并不陌生,如果没有时刻的去关注文档,那么大家可能不太清楚webpack已经默默然的升级到2.x了,对比1.x ...

  2. Verilog HDL基础语法讲解之模块代码基本结构

    Verilog HDL基础语法讲解之模块代码基本结构   本章主要讲解Verilog基础语法的内容,文章以一个最简单的例子"二选一多路器"来引入一个最简单的Verilog设计文件的 ...

  3. Android绘图机制(一)——自定义View的基础属性和方法

    Android绘图机制(一)--自定义View的基础属性和方法 自定义View看起来,确实看起来高深莫测,很多Android开发都不是特别在行这一块,这里面的逻辑以及一些绘画都是有一点难的,说一下我目 ...

  4. Nginx基础详细讲解

    Nginx基础详细讲解 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App,操作更方便哦 1. ...

  5. windowSoftInputMode属性讲解

    windowSoftInputMode属性讲解(下面这段内容我参考别人的博客,并加入我的一些意见) 我们从这个属性的名称中,可以很直观的看出它的作用,这个属性就是来设置窗口软键盘的交互模式的.andr ...

  6. Html基础知识讲解

    Html基础知识讲解 <title>淄博汉企</title> </head> <body bgcolor="#66FFCC" topmar ...

  7. Unity UGUI——Rect Transform组件(基础属性)

    基础属性:Width.Height.Pivot图示 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fo ...

  8. IOS UITableView NSIndexPath属性讲解

    IOS UITableView NSIndexPath属性讲解   查看UITableView的帮助文档我们会注意到UITableView有两个Delegate分别为:dataSource和deleg ...

  9. python基础知识讲解——@classmethod和@staticmethod的作用

    python基础知识讲解——@classmethod和@staticmethod的作用 在类的成员函数中,可以添加@classmethod和@staticmethod修饰符,这两者有一定的差异,简单来 ...

随机推荐

  1. IE浏览器和CSS盒模型

    网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 盒子模型是CSS中一个重要的概念,理解了盒子模型才 ...

  2. 【转】JDBC连接数据库

    创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lang.Class类的 ...

  3. EFcore与动态模型(三)

    紧接着上面的内容,我们继续看下动态模型页面交互实现方式,内容如下: 1,如何实现动态表单 2,如何接收表单数据并绑定到动态模型上 一.如何实现动态表单 由于模型信息都是后台自定义配置的,并不是固定不变 ...

  4. AlloyTouch之无限循环select插件

    写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接 ...

  5. 关于ASP.NET Web Api的HelpPage文档注释问题

    关于ASP.NET Web Api的HelpPage文档注释问题 以前我用微软的HelpPage来自动生成的webAPI帮助文档.在使用了一段时间后发现只能显示Controller上面写的注释文档内容 ...

  6. Flex 布局教程

    今天给大家分享一下flex布局的语法 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于 ...

  7. 数字化工厂解决方案——OA办公自动化与ERP

    移动办公APP/即时通讯 通过集成手机应用,将移动办公引入到企业信息化管理中,能随时随地的完成审批.查询.警报.知会.公告发布.KPI统计和信息推送.系统已经支持苹果系统.安卓系统和微软WP8系统.企 ...

  8. MySQL索引的使用方式

    一,create CREATE INDEX可对表增加普通索引或UNIQUE索引. CREATE INDEX index_name ON table_name (column_list) CREATE ...

  9. 关于Dapper.NET的相关论述

    年少时,为何不为自己的梦想去拼搏一次呢?纵使头破血流,也不悔有那年少轻狂.感慨很多,最近事情也很多,博客也很少更新了,毕竟每个人都需要为自己的生活去努力. 最近在一个群里遇到一个人说的话,在这里不再赘 ...

  10. 1339 / 1163: [Baltic2008]Mafia

    1163: [Baltic2008]Mafia Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 96  Solved: 60[Submit][Statu ...