webpack现在是前端必会的技能了,也是在工作中必定用到的。所以,如果我们现在还不会webpack,那么在将来面试中肯定会被扣分的。
webpack中文官网:https://www.webpackjs.com/concepts/
目前webpack的最新版本是4.41.5(写这篇文章的时候的版本)。好了,接下来介绍一下webpack的概念:
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
其中webpack有以下四个核心概念:
-
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
入口[entry]
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。
const path = require('path'); module.exports = { // 项目入口,webpack从此处开始构建 entry: { main: path.join(__dirname, 'src/index.js'), // 指定入口,可以指定多个 }, ... };
出口[output]
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist
。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
const path = require('path'); module.exports = { // 项目入口,webpack从此处开始构建 entry: { main: path.join(__dirname, 'src/index.js'), // 指定入口,可以指定多个 }, output: { path: path.join(__dirname, "dist"), // bundle生成(emit)到哪里 filename: "bundle.js", // bundle生成文件的名称 }, };
在上面的示例中,我们通过 output.filename
和 output.path
属性,来告诉 webpack bundle 的名称,以及我们想要 bundle 生成(emit)到哪里。
扫描二维码关注公众号,回复:
8663642 查看本文章