什么是Webpack

最新推荐文章于 2023-07-05 21:59:17 发布

「已注销」

最新推荐文章于 2023-07-05 21:59:17 发布

阅读量456

点赞数 1

分类专栏：前端

原文链接：https://www.webpackjs.com/concepts/

版权

11 篇文章 0 订阅

订阅专栏

webpack的主要功能就是“打包”，在一个工程中，你的代码可能会有很多js文件、css或者sass样式文件，数量很多且按照你项目的规范放在各个文件目录下——这对开发阶段很友好，我们可以通过清晰的目录结构，来清晰的修改和编写各部分的代码。

在项目发布上线时，我们并不需要目录结构多么清晰，反而希望尽量减少很多不必要的代码：例如测试代码等。

webpack可以将许多css、sass、png、js等等文件整合成一个或几个js文件，也可以通过配置实现“将所有样式文件打包成一个css文件、将所有js文件打包成一个js文件”这样的功能，并去除不必要的测试代码。

总的来说：webpack 可以看做是模块打包机：他做的事情是，分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能直接运行的扩展语言（Scss、TypeScript 等），将其打包为合适的格式以供浏览器使用

入口(entry point): 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口起点（直接和间接）依赖的。
- 默认值是 ./src/index.js，然而，可以通过在 webpack 配置中配置 entry 属性，来指定一个不同的入口起点（或者也可以指定多个入口起点）。
出口 output: 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，主输出文件默认为 ./dist/main.js，其他生成文件的默认输出目录是 ./dist
loader: 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

注意，loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。

插件 plugins: loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
模式 mode: 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

转自：https://www.webpackjs.com/concepts/

关注