中文文档:https://webpack.docschina.org/concepts/

一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。

在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle

  • entry
  • output
  • loader
  • plugins

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始,webpack 会找出有哪些模块和 library 是入口起点(直接和间接)依赖的。

#webpack.config.js

module.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 参数设置为 developmentproduction 或 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)

webpack基础概念的更多相关文章

  1. 初识webpack——webpack四个基础概念

    前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...

  2. webpack四个基础概念

    本文参考自:https://www.cnblogs.com/xiaohuochai/p/7002344.html webpack 核心概念:入口(entry).输出(output).加载器(loade ...

  3. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  6. TCP/IP基础概念及通信过程举例

    TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...

  7. Jmeter基础之---jmeter基础概念

    Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ...

  8. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  9. 理解 angular2 基础概念和结构 ----angular2系列(二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

随机推荐

  1. 在Linux系统安装Appium

    安装sudo apt-get update sudo apt-get install nodejs sudo apt-get install npm npm install -g appium 卸载: ...

  2. topcoder srm 480 div1

    problem1 link 直接模拟即可. problem2 link 首先,网关一定是安装在client与server之间的链路上.而不会安装在client与client之间的链路上.对于一条路径c ...

  3. linux命令之crontab定时执行任务【转】

    本文转载自:https://www.cnblogs.com/coffy/p/5608095.html 一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护 ...

  4. sudo中的 各类授权 名称包含的操作 权限命令?

    sudo是 do something as super user: 或者说: as Super User Do something: 就是 为 "非根用户赋予根用户的权限" 使用 ...

  5. 洛谷luogu2782

    P2782 友好城市 题目描述 有一条横贯东西的大河,河有笔直的南北两岸,岸上各有位置各不相同的N个城市.北岸的每个城市有且仅有一个友好城市在南岸,而且不同城市的友好城市不相同.每对友好城市都向政府申 ...

  6. 大明A+B(大数相加)解题报告

    Problem Description 话说,经过了漫长的一个多月,小明已经成长了许多,所以他改了一个名字叫"大明". 这时他已经不是那个只会做100以内加法的那个"小明 ...

  7. js字符串与十六进制相互转换

    1.字符串(汉字)转换为十六进制 主要使用字符串.charCodeAt()方法,此方法返回一个字符的Unicode值,再用toString(16)方法,该方法是先将数字对象转换为二进制,再把二进制转化 ...

  8. 用Let's Encrypt实现Https(Windows环境+Tomcat+Java)

    补充1: 已解决20的部分问题,移步这里 单域名下多子域名同时认证HTTPS 补充2: 之前忘了说了,我这个方法只对Tomcat7.0以上有用(要不然就是8.0...) 我自己用的是9.0 原因好像是 ...

  9. 【Selenium2】【项目实战】

    [public/login.py] from selenium import webdriverfrom selenium.webdriver.common.by import Byimport ti ...

  10. docker 日志分析

    日志分两类,一类是 Docker 引擎日志:另一类是 容器日志. Docker 引擎日志 Docker 引擎日志 一般是交给了 Upstart(Ubuntu 14.04) 或者 systemd (Ce ...