webpack_代码007(未授权)

本文介绍: Webpack基于它将根据系进行，然后将这些模块（ js、css、less ）按照指定的规则生成对应的静态。。

Babel：JS编译器（es6->es5，jsx->js）

loader：编译->js

less-loader：less->css

css-loader：css->js

style-loader：

1）通过babylon将 js 转化成 ast (抽象语法树)

2）通过babel-traverse是一个对 ast 进行遍历，使用 babel 插件转化成新的 ast

3）通过babel-generator将 ast 生成新的 js 代码

{ test: /.(less|css)?$/, loader: ["style-loader", "css-loader", "less-loader", "postcss-loader"]}

plug in：`发布订阅、广播、监听`

底层是利用发布订阅模式，webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，在特定的时机对资源做处理

常通过设置 mode 为 ‘production’ 来开启。在生产模式下，Webpack 会自动开启一些优化，包括 Tree Shaking。

// webpack.config.js
module.exports = {
  mode: 'production',
  // other configurations...
};

`websocket`：本地、浏览器的双向通信、hash编译标识、生成时间判断变化

2） webpack 每次编译后，会生成一个Hash值，Hash 代表每一次编译的标识。本次输出的 Hash 值会编译新生成的文件标识，被作为下次热更新的标识

3）webpack监听文件变化（主要是通过文件的生成时间判断是否有变化），当文件变化后，重新编译

动态加载的文件，需要做 resolve、load、transform、parse 操作，并且还有大量的 http请求

本质其实就是在源代码直接上线和打包成唯一脚本main.bundle.js这两种极端方案之间的一种更适合实际场景的中间状态。

const loaderUtils = require("loader-utils");

// 定义一个导出函数，这个函数将被 Webpack loader 调用
module.exports = function(source) {
    // source源码
    const content = doSomeThing2JsString(source);
    
     // 获取用户配置的options
    const options = loaderUtils.getOptions(this);
    
    // 输出当前 loader 执行时的上下文路径，用于解析其他模块路径
    console.log('this.context');
    
    /*
     * this.callback 参数：
     * error：Error | null，当 loader 出错时向外抛出一个 error
     * content：String | Buffer，经过 loader 编译后需要导出的内容
     * sourceMap：为方便调试生成的编译后内容的 source map
     * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，
     * 进而省去重复生成 AST 的过程
     */
    // 通过 this.callback 向 Webpack 返回处理后的结果，这是 loader 的标准写法
    this.callback(null, content);
    // 或者直接使用 return content; 也是可以的，与 this.callback 实现相同的效果
}

this.async 返回一个类似于 Node.js 中的回调函数，它接受两个参数，第一个是错误对象（如果有错误的话），第二个是处理后的内容

module.exports = function(content){
    function timeout(delay) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("{};" + content)
            }, delay)
        })
    }
    const callback = this.async()
    timeout(1000).then(data => {
        callback(null, data)
    })
}

module.exports = async function(content){
    function timeout(delay) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("{};" + content)
            }, delay)
        })
    }
    const data = await timeout(1000)
    return data
}

// webpack.config.js
module.exports = {

  module: {
    rules: [
      {
        //匹配文件后缀名.css等
        test: /^your-regExp$/,
        use: [
          {
             loader: 'loader-name-A',
             // options:自定义配置
             options: {
              // 自定义配置给 loader-name-A
              // 可以根据 loader 的文档提供适当的选项
              // 例如，以下是 loader-name-A 可能使用的某些自定义选项
              optionA: true,
              optionB: 'value',
              },
          }, 
          {
             loader: 'loader-name-B',
          }
        ]
      },
    ]
  }
}

loader是支持以数组的形式配置多个的，因此当Webpack在转换该文件类型的时候，会按顺序链式调用每一个loader，前一个loader返回的内容会作为下一个loader的参数

class SyncHook{
    constructor(){
        this.hooks = [];
    }

    // 订阅事件
    tap(name, fn){
        this.hooks.push(fn);
    }

    // 发布
    call(){
        this.hooks.forEach(hook => hook(...arguments));
    }
}

`compiler：编译过程`

compiler 是 Webpack 的主要编译实例，代表了整个编译过程。

Webpack 在运行时会创建一个 compiler 对象，

//@file: plugins/myplugin.js
class myPlugin {
    constructor(options){
        //用户自定义配置
        this.options = options
        console.log(this.options)
    }
    apply(compiler) {
        console.log("This is my first plugin.")
    }
}

module.exports = myPlugin

配置：`webpack.config.js` 里 `require` 并实例化

const MyPlugin = require('./plugins/myplugin-4.js')

module.exports = {
    ......,
    plugins: [
        new MyPlugin("Plugin is instancing.")
    ]
}

1）webpack 从项目的entry入口文件开始递归分析，调用所有配置的 loader对模块进行编译

2）babel将 js ->ast抽象语法树，

3）babel-traverse对 ast 进行遍历，找到文件的import引用节点

4）每个模块生成一个唯一的 id，并将解析过的模块缓存起来，根据依赖关系生成依赖图谱

5）递归遍历所有依赖图谱的模块，组装成一个个包含多个模块的 Chunk(块)

6）最后将生成的文件输出到 output 的目录中

const fs = require('fs');
const path = require('path');
// babylon解析js语法，生产AST 语法树
// ast将js代码转化为一种JSON数据结构
const babylon = require('babylon');
// babel-traverse是一个对ast进行遍历的工具, 对ast进行替换
const traverse = require('babel-traverse').default;
// 将es6 es7 等高级的语法转化为es5的语法
const { transformFromAst } = require('babel-core');

// 每一个js文件，对应一个id
let ID = 0;

// filename参数为文件路径, 读取内容并提取它的依赖关系
function createAsset(filename) {
  const content = fs.readFileSync(filename, 'utf-8');

  // 获取该文件对应的ast 抽象语法树
  const ast = babylon.parse(content, {
    sourceType: 'module'
  });

  // dependencies保存所依赖的模块的相对路径
  const dependencies = [];

  // 通过查找import节点，找到该文件的依赖关系
  // 因为项目中我们都是通过 import 引入其他文件的，找到了import节点，就找到这个文件引用了哪些文件
  traverse(ast, {
    ImportDeclaration: ({ node }) => {
      // 查找import节点
      dependencies.push(node.source.value);
    }
  });

  // 通过递增计数器，为此模块分配唯一标识符, 用于缓存已解析过的文件
  const id = ID++;
  // 该`presets`选项是一组规则，告诉`babel`如何传输我们的代码.
  // 用`babel-preset-env`将代码转换为浏览器可以运行的东西.
  const { code } = transformFromAst(ast, null, {
    presets: ['env']
  });

  // 返回此模块的相关信息
  return {
    id, // 文件id（唯一）
    filename, // 文件路径
    dependencies, // 文件的依赖关系
    code // 文件的代码
  };
}

// 我们将提取它的每一个依赖文件的依赖关系，循环下去：找到对应这个项目的`依赖图`
function createGraph(entry) {
  // 得到入口文件的依赖关系
  const mainAsset = createAsset(entry);
  const queue = [mainAsset];
  for (const asset of queue) {
    asset.mapping = {};
    // 获取这个模块所在的目录
    const dirname = path.dirname(asset.filename);
    asset.dependencies.forEach((relativePath) => {
      // 通过将相对路径与父资源目录的路径连接,将相对路径转变为绝对路径
      // 每个文件的绝对路径是固定、唯一的
      const absolutePath = path.join(dirname, relativePath);
      // 递归解析其中所引入的其他资源
      const child = createAsset(absolutePath);
      asset.mapping[relativePath] = child.id;
      // 将`child`推入队列, 通过递归实现了这样它的依赖关系解析
      queue.push(child);
    });
  }

  // queue这就是最终的依赖关系图谱
  return queue;
}

// 自定义实现了require 方法，找到导出变量的引用逻辑
function bundle(graph) {
  let modules = '';
  graph.forEach((mod) => {
    modules += `${mod.id}: [
      function (require, module, exports) { ${mod.code} },
      ${JSON.stringify(mod.mapping)},
    ],`;
  });
  const result = `
    (function(modules) {
      function require(id) {
        const [fn, mapping] = modules[id];
        function localRequire(name) {
          return require(mapping[name]);
        }
        const module = { exports : {} };
        fn(localRequire, module, module.exports);
        return module.exports;
      }
      require(0);
    })({${modules}})
  `;
  return result;
}

// ❤️ 项目的入口文件
const graph = createGraph('./example/entry.js');
const result = bundle(graph);

// ⬅️ 创建dist目录，将打包的内容写入main.js中
fs.mkdir('dist', (err) => {
  if (!err)
    fs.writeFile('dist/main.js', result, (err1) => {
      if (!err1) console.log('打包成功');
    });
});

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

css js loader

Babel：JS编译器（es6-&gt;es5，jsx-&gt;js）

loader：编译-&gt;js

less-loader：less-&gt;css

css–loader：css-&gt;js

style-loader：

创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效

ts–loader：

打包编译Typescript文件

执行顺序：出栈(从后往前)

plugin：发布订阅、广播、监听

优、删、简：压缩代码和图片

对AST抽象语法树进行优化

Tree Shaking：未使用的代码移除

压缩算法：简化表达式，字符串压缩

html–webpack-plugin ：

处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）

mini-css-extract-plugin：

打包过后的css在js文件里，该插件可以把css单独抽出来

clean-webpack-plugin ：

每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除

loader和plugin的区别：loader运行在编译阶段，plugins 在整个周期都起作用

热更新加载原理

代码变动->重新编译->局部更新->无需刷新页面

websocket：本地、浏览器的双向通信、hash编译标识、生成时间判断变化

与vite区别：webpack更新整个module、vite更新单个文件

懒加载

代码分割：拆分成块，需要时候再加载

commonJS：import动态导入

减小初始加载时间： 只加载必需的代码块

并行加载： 浏览器支持并行加载多个资源

缓存优化： 只有发生更改的代码块需要重新下载

原理/手写

Loader

Node 模块导出函数（source源码）{return 处理后的source}

同步：return/this.callback

异步：promise+

Node.js 7.6.0+

链式调用：上一个loader返回作为下一个loader参数

Plugin：带有apply方法的class

Tapable：订阅发布

compiler：编译过程

配置：webpack.config.js 里 require 并实例化

webpack

未涉及 loader 和 plugin

相关文章

发表回复 取消回复

Babel：JS编译器（es6->es5，jsx->js）

loader：编译->js

less-loader：less->css

css–loader：css->js

打包编译Typesc ript文件

plug in：`发布订阅、广播、监听`

`websocket`：本地、浏览器的双向通信、hash编译标识、生成时间判断变化

与vite区别：webpack更新整个module、vite 更新单个文件

com monJS：import 动态导入

减小初始加载时间：只加载必需的代码块

并行加载：浏览器支持并行加载多个资源

缓存优化：只有发生更改的代码块需要重新下载

Node 模块导出函数（source 源码）{return 处理后的source}

`compiler：编译过程`

配置：`webpack.config.js` 里 `require` 并实例化

发表回复取消回复