webpack系列--浅析webpack的原理

最新推荐文章于 2024-06-11 20:38:35 发布

松宝写代码

最新推荐文章于 2024-06-11 20:38:35 发布

阅读量776

点赞数 1

分类专栏： webpack 原理文章标签： webpack 原理

本文链接：https://blog.csdn.net/saucxs/article/details/90400921

版权

一、前言现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。二、webpack的原理知其然知其所以然。1、核心概念（1）entry：...

摘要由CSDN通过智能技术生成

一、前言

现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。

在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。

二、webpack的原理

知其然知其所以然。

1、核心概念

（1）entry：一个可执行模块或者库的入口。

（2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。

（3）loader：文件转换器。例如把es6转为es5，scss转为css等

（4）plugin：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。

2、webpack构建流程（原理）

从启动构建到输出结果一系列过程：

（1）初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。

（2）开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。

（3）确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。

（4）编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

（5）完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry配置生成代码块chunk。

（6）输出完成：输出所有的chunk到文件系统。

注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如UglifyPlugin会在loader转换递归完对结果使用UglifyJs压缩覆盖之前的结果。

三、业务场景和对应解决方案

1、单页应用

一个单页应用需要配置一个entry指明执行入口，web-webpack-plugin里的WebPlugin可以自动的完成这些工作：webpack会为entry生成一个包含这个入口的所有依赖文件的chunk，但是还需要一个html来加载chunk生成的js，如果还提取出css需要HTML文件中引入提取的css。

一个简单的webpack配置文件栗子

const { WebPlugin } = require('web-webpack-plugin');
module.exports = {
  entry: {
    app: './src/doc/index.js',
    home: './src/doc/home.js'
  },
  plugins: [
    // 一个WebPlugin对应生成一个html文件
    new WebPlugin({
      //输出的html文件名称
      filename: 'index.html',
      //这个html依赖的`entry`
      requires: ['app','home'],
    }),
  ],
};

说明：require: ['app', 'home']指明这个html依赖哪些entry，entry生成的js和css会自动注入到html中。

还支持配置这些资源注入方式，支持如下属性：

（1）_dist只有在生产环境中才引入的资源；

（2）_dev只有在开发环境中才引入的资源；

（3）_inline把资源的内容潜入到html中；

（4）_ie只有IE浏览器才需要引入的资源。

这些属性可以通过在js里配置，看个简单例子：

new WebPlugin({
    filename: 'index.html',
    requires: {
         app:{
              _dist:true,
              _inline:false,
         }
    },
}),

这些属性还可以在模板中设置，使用模板好处就是可以灵活的控制资源的注入点。

new WebPlugin({
      filename: 'index.html',
      template: './template.html',
}),

//template模板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <link rel="stylesheet" href="app?_inline">
    <script src="ie-polyfill?_ie"></script>
</head>
<body>
<div id="react-body"></div>
<

最低0.47元/天解锁文章

松宝写代码

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
webpack系列--浅析webpack的原理

一、前言现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。二、webpack的原理知其然知其所以然。1、核心概念（1）entry：...
复制链接

扫一扫

专栏目录