对webpack的初步研究1
一、概念:
1、webpack的核心是用于现代JavaScript应用程序的静态模块捆绑器。当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,它映射您的项目所需的每个模块并生成一个或多个包。
- Entry
- Output
- Loaders
- Plugins
二
- Entry
一个入口点指示哪个模块的WebPack应该使用开始建立了其内部的依赖关系图。webpack将确定入口点所依赖的其他模块和库(直接和间接)。
默认情况下,其值为./src/index.js
,但您可以通过在webpack配置中配置entry属性来指定不同的(或多个入口点)。例如:
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
Output
该输出属性告诉的WebPack哪里发出束它创建以及如何命名这些文件。它默认./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'),
filename: 'my-first-webpack.bundle.js'
}
};
Loaders
开箱即用,webpack只能理解JavaScript文件。装载机允许的WebPack处理其他类型的文件,并将其转换为有效的模块,可以通过您的应用程序消耗并添加到依赖关系图。
请注意,import
任何类型的模块(例如.css
文件)的功能都是特定于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会在不正确的情况下发出警告。
在装载程序部分中包含装载程序时,可以检查进一步的自定义。
Plugins
虽然加载器用于转换某些类型的模块,但可以利用插件执行更广泛的任务,如捆绑优化,资产管理和环境变量注入。
查看插件界面以及如何使用它来扩展webpacks功能。
要使用插件,您需要将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'})
]
};
Mode
By setting the mode
parameter to either development
, production
or none
, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production
.
module.exports = {
mode: 'production'
};
Browser Compatibility
webpack支持所有符合ES5标准的浏览器(不支持IE8及以下版本)。的WebPack需要Promise
的import()
和require.ensure()
。如果要支持旧版浏览器,则需要在使用这些表达式之前加载polyfill。
、
对webpack的初步研究1的更多相关文章
- 对webpack的初步研究8
模块 编辑文档 在模块化编程中,开发人员将程序分解为称为模块的离散功能块. 每个模块的表面积小于完整程序,使验证,调试和测试变得微不足道.编写良好的模块提供了可靠的抽象和封装边界,因此每个模块在整个应 ...
- 对webpack的初步研究7
Configuration 您可能已经注意到很少有webpack配置看起来完全相同.这是因为webpack的配置文件是导出对象的JavaScript文件.然后,webpack根据其定义的属性处理此对象 ...
- 对webpack的初步研究6
Plugins 插件是webpack 的支柱.webpack本身构建在您在webpack配置中使用的相同插件系统上! 它们也是这样做的目的别的,一个装载机无法做到的. Anatomy webpack ...
- 对webpack的初步研究5
Loaders 加载器是应用于模块源代码的转换.它们允许您在处理import或“加载” 文件时预处理文件.因此,加载器有点像其他构建工具中的“任务”,并提供了处理前端构建步骤的强大方法.加载器可以将文 ...
- 对webpack的初步研究4
Mode string module.exports = { mode: 'production' }; webpack --mode=production The following string ...
- 对webpack的初步研究3
Output配置output配置选项告诉webpack如何将编译后的文件写入磁盘.请注意,虽然可以有多个entry点,但只output指定了一个配置. A filename to use for th ...
- 对webpack的初步研究2
Entry Points 如“ 入门”中所述,有多种方法可以entry在webpack配置中定义属性.我们会告诉你,你的方法可以配置的entry属性,除了解释为什么它可能对你有用 Single Ent ...
- iOS多线程的初步研究(六)
iOS多线程的初步研究(六) iOS平台提供更高级的并发(异步)调用接口,让你可以集中精力去设计需完成的任务代码,避免去写与程序逻辑无关的线程生成.运行等管理代码.当然实质上是这些接口隐含生成线程和管 ...
- iOS多线程的初步研究3
iOS多线程的初步研究(三) 弄清楚NSRunLoop确实需要花时间,这个类的概念和模式似乎是Apple的平台独有(iOS+MacOSX),很难彻底搞懂(iOS没开源,呜呜). 官网的解释是说run ...
随机推荐
- spring监听机制——观察者模式的应用
使用方法 spring监听模式需要三个组件: 1. 事件,需要继承ApplicationEvent,即观察者模式中的"主题",可以看做一个普通的bean类,用于保存在事件监听器的业 ...
- beanstalkd 安装和配置
安装 安装以centos为例 yum install beanstalkd 配置 使用centos yum安装,通过查看服务脚本发现有这个配置文件 cat /etc/sysconfig/beansta ...
- Postman + Newman 生成测试报告
1.安装Node.js 下载地址: https://nodejs.org/download/ 2.安装Newman 1) 打开cmd,输入:npm install -g newman 2) 安装支持N ...
- hive重要命令
hadoop dfsadmin -safemode leave hadoop退出安全模式让提示符显示当前库: set hive.cli.print.current.db=true;显示查询结果时显示字 ...
- JDBC 国际标准时间
mysql.driver=com.mysql.cj.jdbc.Drivermysql.url=jdbc:mysql://localhost:3306/XXXX?characterEncoding=UT ...
- Arduino的小灯亮起来~~~
呵呵呵~~~昨天宝宝,就守着板子,跟说明书,心里默念,怎么特么还不亮?这个 东西怎么还不出!?~ 我特么没插线,可不不出么... 然后找那跟儿蓝色(我这个是蓝色的,不知道 有没有别的颜色的)的带USB ...
- 知识点C++
比较2个字符串的大小…… s1=s2,strcmp(s1,s2) == ; s1>s2, strcmp(s1,s2) == ; s1<s2, strcmp(s1,s2) == -; str ...
- 《jmeter:菜鸟入门到进阶系列》
jmeter是我从事软件测试工作以来接触的第一个性能测试工具,也是耗费时间精力最多的一个工具,当然,学习jmeter过程中,由于知识储备不够,也顺带学习了很多其他相关的一些知识. 一直有个想法,就是把 ...
- Node.js中package.json中库的版本号详解(^和~区别)
当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号(~).那么他们到底有什么区别呢?先贴一个例子,对照例子来做解释: &q ...
- java基础笔记(1)
---恢复内容开始--- JVM:java虚拟机,java跨平台是通过JVM来实现的, 将java文件执行的过程:源文件----编译器----->字节码文件------解释器------> ...