webpack基础概念
中文文档:https://webpack.docschina.org/concepts/
一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。
在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle。
- entry
- output
- loader
- plugins
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始,webpack 会找出有哪些模块和 library 是入口起点(直接和间接)依赖的。
#webpack.config.jsmodule.exports = {entry: './path/to/my/entry/file.js' };
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,主输出文件默认为 ./dist/main.js
,其他生成文件的默认输出目录是 ./dist
。
你可以通过在配置中指定一个 output
字段,来配置这些处理过程:
webpack.config.js
const path = require('path');module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'), #打包完成后,生成emit到哪里。filename: 'my-first-webpack.bundle.js' #要打包的文件的名字} };
webpack 自身只支持 JavaScript。而 loader 能够让 webpack 处理那些非 JavaScript 文件,并且先将它们转换为有效 模块,然后添加到依赖图中,这样就可以提供给应用程序使用。
loader 能够 import
导入任何类型的模块(例如 .css
文件)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,插件的范围包括:打包优化、资源管理和注入环境变量。
模式
通过将 mode
参数设置为 development
, production
或 none
,可以启用对应环境下 webpack 内置的优化。默认值为 production
。
module.exports = {mode: 'production' };
dependency graph 依赖图
任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体),并且可以把它们作为_依赖_提供给你的应用程序。
什么是 webpack 模块
对比 Node.js 模块,webpack _模块_能够以各种方式表达它们的依赖关系,几个例子如下:
- ES2015
import
语句 - CommonJS
require()
语句 - AMD
define
和require
语句 - css/sass/less 文件中的
@import
语句。 - 样式(
url(...)
)或 HTML 文件(<img src=...>
)中的图片链接(image url)
转载于:https://www.cnblogs.com/chentianwei/p/9877570.html
webpack基础概念相关推荐
- 初识webpack——webpack四个基础概念
前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...
- React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 React 入门系列教程导航 React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 Rea ...
- Webpack核心概念解析
原文链接:banggan.github.io/2019/05/09/- Webpack核心概念解析 终于忙完了论文,可以愉快的开始学习了,重拾起重学前端.webpack以及Vue的源码解读作为入职前的 ...
- webpack基础教程
webpack基础教程 一 webpack五大核心 二 webpack处理css资源 三 webpack处理less.scss.sass.styl资源 四 webpack-module的详细配置 五 ...
- webpack基础版及其常用插件分享超详细~~
webpack的作用 打包.把多个文件打成个数更小的文件. 支持模块化 优化: 代码压缩,加密 掌握webpack的基本使用: 配置webpack.config.js 基本使用 入口 出口 loade ...
- TCP/IP基础概念及通信过程举例
TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...
- Python+Dash快速web应用开发——基础概念篇
作者:费弗里 来源:Python大数据分析 ❝本文示例代码与数据已上传至https://github.com/CNFeffery/DataScienceStudyNotes ❞ 1 简介 这是我的新系 ...
- 理解 angular2 基础概念和结构 ----angular2系列(二)
前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...
- 数据库基础笔记(MySQL)1 —— 基础概念
(写算法题目把自己心态搞崩了,休息两天顺便把之前学的数据库手写笔记记录在网上方便查阅,因为只是自己学的时候做的笔记,如果有错误欢迎大家指正,过两天再重回算法的怀抱哈哈) 如何下载配置 这个感觉视频讲的 ...
最新文章
- 用Python写一份独特的元宵节祝福
- Ubuntu10.10更新源
- Linux下安装jdk1.6和tomcat
- QT Creator介绍
- 普通卷积armv7-neon指令集实现—QNNPACK
- 分享web前端七款HTML5 Loading动画特效集锦
- 查看当前提供了哪些引擎
- 生成简单的Makefile文件(Python实现)
- Offer年薪低于25W全额退款|阿里、腾讯内推快艇《全链路大数据分析工程师》课程招生简章...
- Feign自定义编程配置
- aes c语言 逆列混合函数,c语言aes列混合和逆列混合的实现(3页)-原创力文档
- hbase 特性与api
- 人工智能被拒绝,语音识别做不到给电视直播加字幕?
- 查找所有的两个字姓名,中间加个空格(强迫症的福音)
- fbx模型压缩成gltf格式
- iOS 边学边记 升级ios14 Xcode真机调试启动非常慢的问题解决
- matlab简易画爱心
- 聊新款Macbook pro
- python读取部分文件_Python文件读取部分,python,篇
- LinuxTracing System浅析和eBPF开发经验分享
热门文章
- 简单解决AJAX在IE中的缓存问题
- mysql从库并发连接_MYSQL从库的并发恢复
- python编译为c_cython编译Python为c语言
- python代码示例500行源代码-500行Python代码打造刷脸考勤系统,其实也就那么简单...
- python关闭读写的所有的文件-python文件读写操作
- python画曲线图例-Python数据可视化之Matplotlib(折线图)
- python语言介绍-Python语言的简介
- python是c语言写的吗-先学C语言还是Python?资深程序员往往是这样建议的!
- python视频下载-Python实现视频下载功能
- 零基础python书籍推荐-非IT行业,零基础自学Python,选什么书?