代码构建与webpack知识点

代码构建与webpack知识点

  • 1、Webpack 工具都做了些什么
  • 2、常见的前端构建工具
  • 3、了解Webpack
    • (1)入口(entry)
    • (2)输出(output)
    • (3)Loader
    • (4)插件(plugins)
    • 总结
      • Webpack 到底对项目代码做了什么?

1、Webpack 工具都做了些什么

  • 如今前端项目大多数都使用了模块化,而如果想要将多个文件的代码打包成最终可按照预期运行的代码,则需要使用到代码构建工具。
  • 不管项目代码是如何进行组织的,项目中又有多少个文件,最终浏览器依然会从 HTML 内容进行解析和加载,因此我们需要对项目中的代码进行构建(包括编译和打包),生成浏览器可正常解析和加载的内容

2、常见的前端构建工具

对于前端开发来说,我们会用到各式各样的构建/打包工具:
代码构建与webpack知识点_第1张图片

涉及模块化代码打包的主要有 Grunt/Gulp/Webpack/Rollup

  • Gulp/Grunt 是一种能够优化前端工作流程的工具,比如自动刷新页面、combo、压缩 CSS/JavaScript、编译 Less/Sass 等

  • Webpack/Rollup 是一个 JavaScript 的模块打包器,用于整合编译成最终的代码。

  • 其中,Rollup 通常用来构建库,Webpack 更适合用来构建应用程序。

3、了解Webpack

Webpack 的使用中有 4 个核心概念:入口(entry)、输出(output)、Loader、插件(plugins)

(1)入口(entry)

首先便是入口(entry),entry 指向我们前端应用的第一个启动文件。例如,在 Vue 中是new Vue()位置所在的文件,在 Angular 中是启动.bootstrap()的文件,在 React 中则是ReactDOM.render()或者是React.render()的启动文件。

// 将entry指向启动文件即可
module.exports = {
     
  entry: "./path/to/my/entry/file.js",
};

或许你会疑惑,入口的一个文件,又是怎样把整个前端项目中的代码关联起来,并进行打包的呢?

实际上, Webpack 会从 entry 开始,通过解析模块间的依赖关系,递归地构建出一个依赖图

(2)输出(output)

输出(output)字段用于告诉 Webpack 要将打包后的代码生成的文件名是什么(filename),以及将它们放在哪里(path)。## 入口(entry)

module.exports = {
     
  output: {
     
    filename: "bundle.js", // 编译文件的文件名,比如 main.js/bundle.js/index.js
    path: "/home/proj/public/assets", // 对应一个绝对路径,此路径是你希望一次性打包的目录
  },
};

(3)Loader

  • 要了解 Loader,你需要知道在 Webpack 中,每个文件(.css,.html,.scss,.jpg等) 都会被作为模块处理。如果你看过生成的 bundle.js 代码就会发现,Webpack 将所有的模块打包一起,每个模块添加标记id,通过这样一个 id 去获取所需模块的代码。
  • 但实际上,Webpack 只理解 JavaScript,因此 Loader 的作用就是把不同的模块和文件(比如 HTML、CSS、JSX、Typescript 等)转换为 JavaScript 模块。
  • 而不同的应用场景需要不同的 Loader,比如我们经常会使用到的 CSS 相关 Loader 和其他资源 Loader。
    代码构建与webpack知识点_第2张图片

深度理解:

  • ES6 模块需要依赖 Babel 编译和 Webpack 打包,而 Babel 在 Webpack 中就是使用 Loader 的方式来进行编译的。
  • babel-loader 将 ES6/ES7 语法编译生成 ES5,其中部分特性还需要 babel-polyfill 支持。这是因为 Babel 默认只转换新的 JavaScript 语法(比如const/let),但不会对新的 API(比如Promise)进行处理。
  • Webpack 在编译过程中,支持多个 Loader 通过流水线的方式进行先后编译,编译的顺序为从后往前,最终以 JavaScript模块的方式输出
  • 到这里,我们知道 Webpack 以 entry 为入口,链式调用各个 Loader 进行编译生成 JavaScript,最终打包放置在output 中。其中 Loader 只负责将其他非 JavaScript 模块转换成 JavaScript 模块。

(4)插件(plugins)

插件(plugins)主要负责解决 Loader 无法做到的事情,它可以访问在 Webpack 编译过程中的关键事件,对 Webpack 内部示例的一些数据进行处理,处理完成后回调 Webpack 让其继续。

这样说或许有些抽象,我们直接来看看几个常用的插件就明白了。

  • HtmlwebpackPlugin:可以生成创建 HTML 入口文件,也可以为 HTML 文件中引入的外部资源如 script、link 动态添加每次编译后的哈希值,防止引用缓存的外部文件问题。
  • CommonsChunkPlugin:用来提取代码中的公共模块,并将这些公共模块按照预期进行打包生成独立的文件。
  • ProvidePlugin:用来定义标识符,当遇到指定标识符的时候自动加载模块,适合引入的全局变量(比如 jQuery)。
  • ExtractTextPlugin:可以将样式从 JavaScript 中抽出,生成单独的 .css 样式文件。

总结

webpack的插件是可以用来控制最终生成的代码是如何进行组织和输出的,包括对代码的打包优化、压缩,甚至是启用模块热替换、重新定义环境中的变量,等等。

Webpack 到底对项目代码做了什么?

(1) 通过 entry 指定的入口开始,解析各个文件模块间的依赖。

(2)根据模块间的依赖关系,开始对各个模块进行编译。

(3)编译过程中,根据配置的规则对一些模块使用 Loader 进行编译处理。

(4)根据插件的配置,对 Loader 编译后的代码进行封装、优化、分块、压缩等。

(5)最终 Webpack 整合各个模块,根据依赖关系将它们打包成最终的一个或者多个文件。

最终让前端项目中模块化的代码能最终在浏览器中进行加载、并正常地工作。

你可能感兴趣的:(前端进阶笔记,前端代码构建,webpack)