中文文档: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. SVM学习笔记4-核函数和离群点的处理

    核函数在svm里,核函数是这样定义的.核函数是一个n*n(样本个数)的矩阵,其中:$K_{ij}=exp(-\frac{||x^{(i)}-x^{(j)}||^{2}}{2\sigma ^{2}})$ ...

  2. Django框架(六) Django之模板继承

    模版导入和继承 模版导入 一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面 <% include "a.html" %> 可以引用多次 模板,i ...

  3. 如果让我重来,我会选择C和(或者)Python。

    如果让我重来,我会选择C和(或者)Python.Python语法和库更丰富,上手更容易,使用更方便.C简单直接,学习成本不高,贴近底层,能帮助了解底层细节.先强调:1. 语言只是工具,假以时日,你都会 ...

  4. html 之 position 绝对定位与相对定位(待补充)

    相对定位:对于区块标签而言,占着原有的空间 绝对定位:对于网页而言,不占原来的空间

  5. sql 指定数据库中的信息操作

    查是否有该表名 SELECT * FROM sys.objects WHERE name='表名'查表字段的信息select * from syscolumns where id=Object_Id( ...

  6. HDU 4576 Robot

    思路 概率dp 既然是求概率,顺推 显然有转移\(dp[i][j]=dp[i-1][j-w]/2+dp[i-1][w]/2\) 然后是环,注意特判一下 环上不要用取模处理循环的情况,会被卡常 代码 # ...

  7. Could not stop Cortex-M device! please check the JTAG cable的解决办法

      今天程序烧录后,进行调试时keil提示:Could not stop Cortex-M device!  please check the JTAG cable   如图: 于是我在网上搜了一下, ...

  8. 基于OpenNetVM配置环境的发包实践

    参考: openNetVM 基于OpenNetVM配置环境的发包实践 注意:本文并未对OpenNetVM的服务链进行测试,而是在借助OpenNetVM脚本环境的情况下,分别对Pktgen和MoonGe ...

  9. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

  10. RN 上传文件到以及上传文件到七牛云(初步)

    本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...