webpack入门总结
栏目: JavaScript · 发布时间: 5年前
内容简介:官网:具有一定功能的模块。打包后的文件。
官网: https://www.webpackjs.com/
核心原理
- 一切皆模块
- 按需加载
概念
module
具有一定功能的模块。
bundle
打包后的文件。
chunk
打包过程分割的代码块。
Entry
Webpack 会递归的探索出 入口文件中所依赖的模块,并按照顺序 利用 Loader 进行处理。
方式
单入口
1.string
entry: "app.js";
多入口
1.Array<string>
数组中的每一项都会被打包,形成互不依赖的文件
entry: ["app.js","main.js"];
2.object
entry: { [entryChunkName]: string | Array<string> }
对象中的每一个属性都会被打包,形成互不依赖的文件
entry: { index:['index.js','app.js'], vendor: 'vendor.js' }
Output
即是你配置了多个入口文件,你也只能有一个输出点。
path
输出文件的目录。
绝对路径
filename
输出的文件名,它一般跟你entry配置相呼应。
单入口
- 自定义
filename: "[name].bundle.js"
多入口
- [name].js
- [id].js, 使用内部 chunk id
- [hash].js, 使用每次构建过程中,唯一的 hash 生成
在项目中任何一个文件改动后就会被重新创建,然后webpack计算新的hash值
- [chunkhash].js, 使用基于每个 chunk 内容的 hash
publicPath
公共资源路径
publicPath 应该以/结尾,同时其它 loader 或插件的配置不能以/开头
chunkFilename
块,配置了它,非入口entry的模块,会帮自动拆分文件,也就是大家常说的按需加载,与路由中的 require.ensure相呼应。
resolve
配置模块如何解析。
extensions:自动解析确定的扩展,省去你引入组件时写后缀的麻烦,
alias:非常重要的一个配置,它可以配置一些短路径,
module.rules - 编译规则
rules:也就是之前的loaders,
test : 正则表达式,匹配编译的文件,
exclude:排除特定条件,如通常会写node_modules,即把某些目录/文件过滤掉,
include:它正好与exclude相反,
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++语言的设计和演化
[美] Bjarne Stroustrup / 裘宗燕 / 机械工业出版社 / 2002-1 / 48.00元
这本书是C++的设计者关于C++语言的最主要著作之一。作者综合性地论述了C++的历史和发展,C++中各种重要机制的本质意义和设计背景,这些机制的基本用途和使用方法,讨论了C++所适合的应用领域及其未来的发展前景。一起来看看 《C++语言的设计和演化》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
正则表达式在线测试
正则表达式在线测试