webpack学习

模块化的优点

• 作用域封装
• 重用性
• 解除耦合

大体结构

(function(modules){
    var installedModules = {};
    function __webpack_require__(moduleId){//可认为浏览器的require
        /**/
    }
    return __webpack_require__(0); //入口文件
})([/*模块数组*/])

核心方法

function __webpack_require__(moduleId){
    // 检查是否已经导入模块
    if(installedModules[moduleId]){
        return installedmodules[moduleId].exports;
    }
    // 创建一个新模块（且导入缓存）
    var module = installedModules[moduleId]={
        i:moduleId,
        l:false,
        export:{}
    }
    // 执行模块函数
    modules[moduleId].call(
        module.export,
        module,
        modules.export,
        __webpack_require__)
    module.l=true;
    return module.exports;
    
}

webpack打包的核心逻辑

• 从入口文件开始，分析整个文件的依赖树
• 将每个依赖模块包装起来，放到一个数组中等待调用
• 实现模块加载的方法，并把它放在模块中执行的环境中，确保模块间可以互相调用
• 把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数

webpack与立即执行函数的关系

可以看到入口文件将会被立即函数执行

loader:文件加载器，用于在js中记载其他类型的资源例如css，png，less等

eg. ‘style-loader’ ‘css-loader’,这两个loader用加载css文件，先是加载style再是css，这样页面就能把样式渲染上去

​ babel-loader @babel/preset-env @babel/preset-react两种规则去解析es6，jsx，react语法

性能优化

思路：t=s/v , 减少打包数量，多线程加快速度

打包结果优化

TerserPlugin进行压缩

webpack搭建简单react项目

进行一些无效的代码的删减，parallel可以进行多线程打包

构建过程优化

happyPack

thread-loader

Tree-Sharking：消除无用的js代码

参考链接：https://lequ7.com/cong-ling-kai-shi-webpack-da-jian-reactredux-ying-yong.html

npm init -y
npm install webpack webpack-cli --save-dev

创建配置文件夹

webpack.config.js:基础通用配置

webpack.dev.js:开发环境配置

webpack.prod.js:生产环境配置

基础配置：

入口，输出（这里引用了path模块，读取绝对路径），模块规则，包括解析js（x）的babel，解析css和less的style，css，less loader

使用插件清空之前的打包结果，模板html插件生成打包文件里的html

遇到问题：我的打包没问题但是运行时bundle文件内部代码是存在错误的，非常困惑！

用了另外的教程重新搭了一次，同样的问题，最后这个教程区别点在与这个清空插件，，暂时只能将原因归根于此（猜测是之前的打包结果还存留在生成的js文件中，玄学之吃完饭跑新搭建的ok，重新跑老的也ok。）

webpack-merge进行我们的配置合并，这样可以将我们的开发环境配置和生产环境进行了分离（因为两者的注重点不一样，前者如热启动方面的功能在注重轻便快速的生产环境中就显得非常多余笨重）

根目录下.babelrc文件定义规则

之后就是经典的react代码，在入口文件处

最后运行脚本：dev热启动

结果如下：

基本上这样的配置也足够我进行后续的三组件开发了，今天就这样过去了。。。。。。。。。。

本文地址：https://blog.csdn.net/qq_41471157/article/details/107345812