webpack官方文档分析(二):概念
1、概念
webpack的核心是将JavaScript应用程序的静态捆绑模块。当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个包。
从版本4.0.0开始,webpack不需要配置文件来捆绑您的项目,但它可以非常灵活地配置以更好地满足您的需求
(1)Entry:
一个entry point指示哪个模块的WebPack应该使用开始建立了它的内部依赖关系图,将的WebPack找出entry point取决于(直接或间接)哪些其他模块和库。
默认情况下,其值为./src/index.js
,但您可以通过在webpack配置中配置entry属性来指定不同的(或多个入口点)。例如:
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
(2)Output:
output 属性告诉WebPack哪里在哪里发出它创建的包以及如何命名这些文件。,默认./dist/main.js
主输出文件,以及将其他生成的文件输出到./dist
文件夹。
您可以配置中指定输出文件夹:
webpack.config.js
const path = require('path'); module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
在上面的示例中,我们使用output.filename
和output.path
属性来告诉webpack我们的bundle的名称以及我们希望它发送到的位置。在顶部导入的路径模块,它是一个Node.js核心的模块,用于操作文件路径。
(3)Loaders
开箱即用,webpack只能理解JavaScript文件。Loaders允许WebPack处理其他类型的文件,并将它们转换成可被应用程序识别并添加到依赖图中的有效模块。
在较高级别,加载器在您的webpack配置中有两个属性:
- 该
test
属性标识应转换的文件。 - 该
use
属性指示应使用哪个加载程序进行转换。
webpack.config.js
const path = require('path'); module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
上面的配置rules
为具有两个必需属性的单个模块定义了一个属性:test
和use
。这告诉webpack的编译器如下
“嘿webpack编译器,当你遇到解析为require()
/ import
statement语句中'.txt'文件的路径时,在将它添加到bundle之前使用它raw-loader
来转换它。”
重要的是要记住,在webpack配置中定义规则时,您要在其下定义规则,module.rules
而不是rules
。为了您的便利,webpack会在不正确的情况下发出警告。
(4)Plugins
虽然加载器用于转换某些类型的模块,但可以利用插件执行更广泛的任务,如捆绑优化,资产管理和环境变量注入。
要使用插件,您需要将require()
添加到plugins
数组中。大多数插件都可以通过选项进行自定义。由于您可以在配置中多次使用插件用于不同目的,因此您需要通过使用new
运算符调用它来创建它的实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
在上面的示例中,html-webpack-plugin
为您的应用程序生成一个html文件,自动注入所有生成的包
(5)Mode
通过设定mode
参数设置为development
,production
或者none
,您可以启用对应于每个环境的WebPack内置的优化。默认值为production
。
module.exports = {
mode: 'production'
};
(5)浏览器兼容性
webpack支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。WebPack需要Promise
的import()
和require.ensure()
。如果要支持旧版浏览器,则需要在使用这些表达式之前加载polyfill。
webpack官方文档分析(二):概念的更多相关文章
- webpack官方文档分析(三):Entry Points详解
1.有很多种方法可以在webpack的配置中定义entry属性,为了解释为什么它对你有用,我们将展现有哪些方法可以配置entry属性. 2.单一条目语法 用法: entry: string|Array ...
- webpack官方文档分析(一):安装
一:安装 1.首先要安装Node.js->node.js下载 2.本地安装 要安装最新版本或特定版本,运行如下: npm install --save-dev webpack npm insta ...
- 转:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- OKHttp 官方文档【二】
OkHttp 是这几年比较流行的 Http 客户端实现方案,其支持HTTP/2.支持同一Host 连接池复用.支持Http缓存.支持自动重定向 等等,有太多的优点. 一直想找时间了解一下 OkHttp ...
- Gora官方文档之二:Gora对Map-Reduce的支持
参考官方文档:http://gora.apache.org/current/tutorial.html 项目代码见:https://code.csdn.net/jediael_lu/mygoradem ...
- Gora官方文档之二:Gora对Map-Reduce的支持 分类: C_OHTERS 2015-01-31 11:27 232人阅读 评论(0) 收藏
参考官方文档:http://gora.apache.org/current/tutorial.html 项目代码见:https://code.csdn.net/jediael_lu/mygoradem ...
- webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了
__dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径. path.resolve(): 方法将一系列路径或路径段解析为绝对路径. 语法: p ...
- surprise库官方文档分析(二):使用预测算法
1.使用预测算法 Surprise提供了一堆内置算法.所有算法都派生自AlgoBase基类,其中实现了一些关键方法(例如predict,fit和test).可以在prediction_algorith ...
- webpack官方文档学习
一.webpack是什么? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 二.安装 前提条 ...
随机推荐
- T100——修改单身栏位,开窗,当前行
PRIVATE FUNCTION axmt500_update_xmdc028() ###更改出货库位 DEFINE l_i INT DEFINE l_index INT DIALOG ATTRIBU ...
- 手动导入jar到本地mvn仓库
<dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId ...
- Jmeter安装及配置(含JDK安装)
(一)java环境配置1.官网下载64位的jdkhttp://www.oracle.com/technetwork/java/javase/downloads/index.html 2.环境变量设置变 ...
- 【原创】大数据基础之Kudu(4)spark读写kudu
spark2.4.3+kudu1.9 1 批量读 val df = spark.read.format("kudu") .options(Map("kudu.master ...
- 2 java开发环境的配置步骤
1 首先需要下载JDK(以java se development kit java标准版开发包) 8.0 如果只是单纯的运行java程序则只需要安装JRE(java runtime envirome ...
- Java高并发程序设计学习笔记(六):JDK并发包(线程池的基本使用、ForkJoin)
转自:https://blog.csdn.net/dataiyangu/article/details/86573222 1. 线程池的基本使用1.1. 为什么需要线程池1.2. JDK为我们提供了哪 ...
- vue项目默认IE以最高级别打开
只需要在index.html加入 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- Shell脚本case语句
case语句格式 case 变量 in PAT1) 执行语句 ;; PAT2) 执行语句 ;; *) 默认执行语句 ;; esac 使用示例: 编写一个shell脚本,通过提示用户输入信息,输出cpu ...
- DNS缓存失败怎么解决?
DNS的中文名是域名系统,是域名和IP地址相互映射的一个分布式数据库.有了DNS,我们上网时直接输入网站域名(即网址)即可,而不用输入网站的IP地址访问网站,对于用户来说比较方便记忆和访问. 每次当我 ...
- 从 Android 源码到 apk 的编译打包流程
文中涉及到的工具所在目录:Android/sdk/build-tools.下面开始分解并逐步实现对源码的打包. 编译流程 1. 生成仅包含资源文件的 apk 包和 R.java 文件 根据资源文件和 ...