webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。
入口
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
默认值是 ./src/main.js,但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点。
示例:
单个入口(简写)语法
webpack.config.js
entry: {
app: './src/main.js'
},
当你向 entry
传入一个数组时会发生什么?
向 entry
属性传入文件路径数组,将创建出一个 多主入口(multi-main entry)。在你想要一次注入多个依赖文件,并且将它们的依赖导向(graph)到一个 chunk 时,这种方式就很有用。
对象语法
用法:entry: {[entryChunkName: string]: string|Array<string>}
entry:{
app: './src/main.js'
adminApp: './src/adminApp.js'
}
常用场景:
分离 app(应用程序) 和 vendor(第三方库) 入口
在 webpack < 4 的版本中,通常将 vendor 作为单独的入口起点添加到 entry 选项中,以将其编译为单独的文件(与 CommonsChunkPlugin
结合使用)。而在 webpack 4 中不鼓励这样做。而是使用 optimization.splitChunks
选项,将 vendor 和 app(应用程序) 模块分开,并为其创建一个单独的文件。不要 为 vendor 或其他不是执行起点创建 entry。
多页面应用
entry:{
page1:'./src/main.js'
page2:'./src/main2.js'
page3:'./src/main3.js'
}
我们告诉 webpack 需要三个独立分离的依赖图(如上面的示例)。
在多页面应用程序中,服务器会传输一个新的 HTML 文档给你的客户端。页面重新加载此新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事:
使用 optimization.splitChunks
为页面间共享的应用程序代码创建 bundle。由于入口起点增多,多页应用能够复用入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益。
输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js
,其他生成文件默认放置在 ./dist
文件夹中。
你可以通过在配置中指定一个 output
字段,来配置这些处理过程:
loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
注意,loader 能够 import
导入任何类型的模块(例如 .css
文件),这是 webpack 特有的功能,其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的,因为这可以使开发人员创建出更准确的依赖关系图。
在 webpack 的配置中 loader 有两个属性:
test
属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。use
属性,表示进行转换时,应该使用哪个 loader。
上面这demo的意思就是告诉webpack在require()
/import
语句中被解析为 '.txt' 的路径时,在打包前先用raw-loader转换一下。
重要的是要记住,在 webpack 配置中定义 rules 时,要定义在 module.rules
而不是 rules
中。为了使你受益于此,如果没有按照正确方式去做,webpack 会给出警告。
请记住,使用正则表达式匹配文件时,你不要为它添加引号。也就是说,/\.txt$/
与 '/\.txt$/'
/ "/\.txt$/"
不一样。前者指示 webpack 匹配任何以 .txt 结尾的文件,后者指示 webpack 匹配具有绝对路径 '.txt' 的单个文件; 这可能不符合你的意图。
插件(plugin)
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。