webpack入门总结1
官网:https://www.webpackjs.com/
核心原理
- 一切皆模块
- 按需加载
概念
module
具有一定功能的模块。
bundle
打包后的文件。
chunk
打包过程分割的代码块。
关于webpack的理解
可以从以下几个方面来理解webpack:
- 文件处理与编译
- 开发环境
- 打包优化
- 框架配合
webpack核心概念
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
静态资源服务器访问路径,以index.html的路径为基准。
静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
publicPath 应该以/结尾,同时其它 loader 或插件的配置不能以/开头
chunkFilename
配置了它,为非入口entry的模块命名,可以理解为需要被打包出来的文件命名。
以path路径为基准
resolve
配置模块如何解析。
extensions:自动解析确定的扩展,省去你引入组件时写后缀的麻烦
alias:非常重要的一个配置,它可以配置一些短路径
module
对比 Node.js 模块,webpack 模块能够以各种方式表达它们的依赖关系,几个例子如下:
ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)
module.rules - 编译规则
rules:也就是之前的loaders
test : 正则表达式,匹配编译的文件
exclude:排除特定条件,如通常会写node_modules,即把某些目录/文件过滤掉
include:它正好与exclude相反
webpack入门总结1相关推荐
- webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
- webpack入门学习手记(一)
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
- WEBPACK 入门
webpack 入门 1. 什么是webpack 官网介绍:webpack是一个模块打包器.webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源.(webpack is a mod ...
- webpack入门--前端必备
什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 r ...
- webpack入门(四)——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
- webpack入门核心知识还看不过瘾?速来围观万字入门进阶知识
一文了解webpack入门进阶知识
- webpack入门学习手记(一) 1
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
- 前端自动化构建工具之webpack入门——简单入门
写在前面 这篇博客也是参照别人的webpack入门,加上自己的一些操作,还有我在此过程中遇到的困难.如果是已经入门的或者这方面的高手,请绕行,也请勿吐槽. 正文开始 我们为什么要学习webpack 首 ...
- webpack入门学习笔记10 —— 在项目中使用图片资源
1. 写在前面 在前端项目中,图片是必不可少的一种资源.在使用图片的时候,我们可以有以下几种方式: 在 .html 文件中,通过 <img src="" alt=" ...
- (三)webpack入门——webpack功能集合的demo
ErduYang 自律的人生才自由 博客园 首页 新随笔 联系 订阅 管理 随笔 - 37文章 - 0评论 - 8 (三)webpack入门--webpack功能集合的demo 此篇文章来源于http ...
最新文章
- 核心路由器聚焦三大关键点
- thymleaf th:text 和 th:utext 之间的区别
- 京东购物车的 Java 架构实现及原理
- 12篇文章带你逛遍主流分割网络
- 手写一个动态代理实现,手写Proxy,手写ClassLoader,手写InvocationHandler
- eclipse添加maven配置
- ACT的摘要可以告诉我们的内容
- 电子书格式转换 azw3 to epub (软件calibre的简单使用)
- python爬网站信息_一个爬取实习僧网站信息的爬虫
- swap file .swp already exists
- DirectX12 3D游戏开发实践(龙书)第二章_矩阵代数
- Mac下添加Chrome插件
- 计算机怎么删除东西,电脑文件如何删除干净
- 聪明的大脑 少碰以下的食物!!
- RS Meet DL(68)-建模多任务学习中任务相关性的模型MMoE
- BigDecimel转人民币大写
- 抖音如何能快速涨粉?
- STM32控制ESP8266透传到私有HTTP服务器(Json数据格式)
- 学生成绩管理系统设计
- 多标签文本分类研究进展概述
热门文章
- 阶段1 语言基础+高级_1-3-Java语言高级_07-网络编程_第2节 TCP协议_1_TCP通信的概述(上)...
- 电子书下载:[FBI教你破解身体语言].(美)乔·纳瓦罗.(美)马文·卡尔林斯.文字版...
- 最短路 Dijkstra 算法详解与模板
- 快速遍历目录下所有文件名
- 微信支付之异步通知签名错误
- 国内语料库建设一览表
- 前端常用插件、工具类库汇总,不要重复造轮子啦!!!
- 贝塞尔曲线(UIBezierPath)属性、方法汇总
- Android复习之冒泡排序
- 针对dhtmlX当中的treegrid在java类当中的封装实现的步骤(后台代码)