乐趣区

关于前端:Webpack-介绍

Webpack 介绍

原文链接:https://note.noxussj.top/?source=sifo

什么是 webpack?

怎么了解这段话呢,咱们我的项目个别都是由 html 文件、css 文件、js 文件组成。应用 webpack 模块化打包工具,能够把整个我的项目的代码全副打包并且压缩成一个名为 bundles.js 的文件,通过 index.html 去引入它。

咱们在学习 webpack 的时候,可能会感觉很难,那是因为你还没想通。咱们应该要多一点思考为什么会有这个货色,它存在的意义是什么?解决了什么问题?抱着这种心态去学习,简单的问题也会变的很简略。

官网文档地址:https://webpack.docschina.org


webpack 外围

webpack 中的外围是 loader,假如没有 loader,那么 webpack 就是一个合并代码的工具。


webpack 工作原理

  1. 个别我的项目都会散落各种代码以及资源文件
  2. webpack 会依据配置找到资源文件的入口(个别都是 js 文件)
  3. 顺着入口文件的代码寻找 import 或者 require 语句,解析推断进去所对应的资源模块,
  4. 而后别离解析每个资源模块所对应的依赖,最终将我的项目中有用到的文件造成一个依赖树
  5. webpack 遍历依赖树,找到每个资源节点所对应的文件,而后通过配置的 loader 加载器去加载
  6. 最初将加载到的后果增加到 bundle.js 中

原文链接:https://note.noxussj.top/?source=sifo

退出移动版