官方网站:https://webpack.js.org/concepts/
概要
webpack的核心是用于现代javascript应用程序的静态模型绑定器。当webpack处理你的应用时,webpack会在内部构建一个依赖图,这个图会映射你的项目所需要的每个模块,以及会生成一个或更多的包。
自从4.0.0的版本发布后,webpack不要求配置文件来绑定你的项目了。尽管如此,它的配置性是难以置信的更加好的满足你的需求。
要开始,你需求了解下面的这些概念。
.Entry入口
.Output输出
.Loaders加载器
.plugins插件
.Mode模态
.Browser Compatibility浏览器兼容
这个文档旨在对这些概念进行一个高度的概述,同时提供详细具体概念用例的链接。
为了更好的理解模块绑定器背后的想法,以及他们如何在引擎下工作,请参考下面的资源。
.手动绑定应用程序
.实时编码一个简单的模块绑定器
.一个简单模块绑定器的详细说明
Entry入口
入口点指示了webpack应该使用哪个模块开始构建其内部依赖关系图。webpack将找出入口点依赖的其他模块和库(直接和间接),默认情况下,它的值为./src/index/js,但是您可以通过在配置中配置entry属性来指定不同的(或多个入口点).例如
module.exports = {
entry: './path/to/my/entry/file.js'
};
Output输出
在上面的示例中,我们使用output.filename和output.path属性告诉webpack包的名称以及要将其发送到的位置。如果您想知道在顶部导入的路径模块,可以使用 node.js核心模块来操作文件路径。
Loaders
开箱即用,Webpack只理解JavaScript和JSON文件。加载程序允许Webpack处理其他类型的文件,并将其转换为有效的模块,这些模块可由应用程序使用并添加到依赖关系图中。
请注意,导入任何类型的模块(例如.css文件)的能力是Webpack特有的功能,可能不受其他绑定者或任务运行者的支持。我们认为这种语言的扩展是有必要的,因为它允许开发人员构建更精确的依赖关系图。
在较高级别上,加载程序在Webpack配置中有两个属性:
1.test属性标识应转换的文件。
2.use属性指示应使用哪个加载程序进行转换
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
上面的配置为具有两个必需属性的单个模块定义了一个rule属性:测试和使用。这将告诉Webpack的编译器以下信息
“嘿,Webpack编译器,当您遇到在require()/import语句内解析为“.txt”文件的路径时,请在将其添加到包之前使用raw-loader对其进行转换。”
重要的是要记住,在Webpack配置中定义规则时,您是在module.rules下定义的,而不是在rules下定义的。为了您的利益,如果操作不正确,Webpack将警告您。
请记住,使用regex匹配文件时,不能引用它。例如,/\.txt$/与'/\.txt$/'或'/\.txt$/'不同。前者指示Webpack匹配以.txt结尾的任何文件,后者指示Webpack匹配具有绝对路径“.txt”的单个文件;这可能不是您的意图。
Plugins
虽然加载程序用于转换某些类型的模块,但是可以利用插件执行更广泛的任务,如包优化、资产管理和环境变量的注入。
为了使用插件,您需要()它并将其添加到插件数组中。大多数插件都可以通过选项进行定制。由于您可以在一个配置中多次使用一个插件用于不同的目的,所以您需要通过使用新的操作符来调用它来创建一个插件实例。
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插件通过自动注入所有生成的包,为应用程序生成一个html文件。
在Webpack配置中使用插件很简单。然而,有许多用例值得进一步探索。在这里了解更多。
Mode
通过将模式参数设置为“开发”、“发布”或“无”,您可以启用与每个环境对应的Webpack内置优化。默认值为发布。
module.exports = {
mode: 'production'
};
Browser Compatibility
Webpack支持所有符合ES5的浏览器(不支持IE8及以下版本)。webpack需要import()和require.secure()的承诺。如果要支持较旧的浏览器,则在使用这些表达式之前需要加载polyfill
后记
后面的不打算翻译了,大家还是自己去看官方文档吧,对我来说,一边翻译一边记下单词是非常好的背单词的方法,而且比我平时找各种资料来学英语有动力多了。
map:绘制,映射 manipulate 操纵,处理
nevertheless:然后,尽管如此 be consumed by 消耗,使用
incredibly:不可思议,难以置信 Note that 请注意
compatibility:兼容性 any type 任何类型
overview:概述 feature 特征
manually:手工地 specific 明确的,特定的
indirectly:间接地 extension 扩大,延伸
specify:具体地 warranted 使用必要,使正当
In case:假设,如果 identifies:确定,标识
raw :原始地 and not 而不是
instructs:指示,教授 customization 自定义
optimization :最佳优化 injection:注入
perform:执行 variable:变量
be leveraged to :利用 multiple times:多次
straightforward:简单的,易懂的 built-in:内置的,优化
take place on:发生,举行