涉及模块化代码打包的主要有 Grunt/Gulp/Webpack/Rollup
Gulp/Grunt 是一种能够优化前端工作流程的工具,比如自动刷新页面、combo、压缩 CSS/JavaScript、编译 Less/Sass 等
Webpack/Rollup 是一个 JavaScript 的模块打包器,用于整合编译成最终的代码。
其中,Rollup 通常用来构建库,Webpack 更适合用来构建应用程序。
Webpack 的使用中有 4 个核心概念:入口(entry)、输出(output)、Loader、插件(plugins)
首先便是入口(entry),entry 指向我们前端应用的第一个启动文件。例如,在 Vue 中是new Vue()位置所在的文件,在 Angular 中是启动.bootstrap()的文件,在 React 中则是ReactDOM.render()或者是React.render()的启动文件。
// 将entry指向启动文件即可
module.exports = {
entry: "./path/to/my/entry/file.js",
};
或许你会疑惑,入口的一个文件,又是怎样把整个前端项目中的代码关联起来,并进行打包的呢?
实际上, Webpack 会从 entry 开始,通过解析模块间的依赖关系,递归地构建出一个依赖图
输出(output)字段用于告诉 Webpack 要将打包后的代码生成的文件名是什么(filename),以及将它们放在哪里(path)。## 入口(entry)
module.exports = {
output: {
filename: "bundle.js", // 编译文件的文件名,比如 main.js/bundle.js/index.js
path: "/home/proj/public/assets", // 对应一个绝对路径,此路径是你希望一次性打包的目录
},
};
深度理解:
插件(plugins)主要负责解决 Loader 无法做到的事情,它可以访问在 Webpack 编译过程中的关键事件,对 Webpack 内部示例的一些数据进行处理,处理完成后回调 Webpack 让其继续。
这样说或许有些抽象,我们直接来看看几个常用的插件就明白了。
webpack的插件是可以用来控制最终生成的代码是如何进行组织和输出的,包括对代码的打包优化、压缩,甚至是启用模块热替换、重新定义环境中的变量,等等。
(1) 通过 entry 指定的入口开始,解析各个文件模块间的依赖。
(2)根据模块间的依赖关系,开始对各个模块进行编译。
(3)编译过程中,根据配置的规则对一些模块使用 Loader 进行编译处理。
(4)根据插件的配置,对 Loader 编译后的代码进行封装、优化、分块、压缩等。
(5)最终 Webpack 整合各个模块,根据依赖关系将它们打包成最终的一个或者多个文件。
最终让前端项目中模块化的代码能最终在浏览器中进行加载、并正常地工作。