240 发简信
IP属地:天津
  • @帅帅的老陆 刚看到你的评论

    webpack 打包的时候,会根据入口文件的依赖关系来生成依赖图,比如入口文件 index.js 依赖了模块 a 和模块 b,模块 a 又依赖模块 a1 和模块 a2,那么 index.js 的依赖图里就包括 index.js、a、b、a1、a2 这些模块。有几个入口文件,就生成几张依赖图。你的配置里有两个入口文件,就会生成两张依赖图。

    每个依赖图打包成一个 bundle。也就是说 webpack 会将 index.js、a、b、a1、a2 这些模块打包到一个 bundle 中。你的配置里有两个入口文件,会生成两张依赖图,打包生成两个 bundle。根据第一个入口文件 index.js 的依赖关系生成第一张依赖图,然后将第一张依赖图里的所有模块一起打包生成第一个 bunlde:main.bundle.js。根据第二个入口文件 ProcessList.jsx 的依赖关系生成第二张依赖图,然后将第二张依赖图里的所有模块一起打包生成第二个 bunlde:Ast_yjzb.bundle.js。

    各个入口文件生成的依赖图是独立的,他们不会考虑其他的依赖图中是否有重复的模块。只要是出现在依赖图中的模块,就会打包到该依赖图生成的 bundle 中。如果 index.js 生成的依赖图里面有 ProcessList.jsx 模块,那么 ProcessList.jsx 模块以及该模块的依赖模块就会出现在 index.bundle.js 文件中。你的配置里两张依赖图里都包括 ProcessList.jsx 模块,那么打包生成的 main.bundle.js 和 Ast_yjzb.bundle.js 里都包括 ProcessList.jsx 模块的代码。

    通过 dependOn 选项,可以将一张依赖图中的指定模块分离出去,不会出现在该依赖图最后打包生成的 bundle 中。配置文件如下:
    module.exports = {
    entry: {
    main: {
    import: './src/index.js',
    dependOn: 'Ast_yjzb'
    },
    Ast_yjzb: './src/pagen/Ast_yjzb/ProcessList.jsx',
    }
    }
    通过以上配置,webpack 就知道了 main entry 依赖于 Ast_yjzb entry,webpack 就会从第一张依赖图里去除掉 Ast_yjzb 的依赖图。也就是说 ProcessList.jsx 模块以及它的依赖模块只会打包到 Ast_yjzb.bundle.js 中,而不会打包到 main.bundle.js 中。

    Webpack 5(五)代码分离

    如果不分离,生成一个 chunk,包含依赖图中的所有模块以及 runtime 和 manifest 代码 分离 runtime 和 manifest 代码 runtime 和...

  • Node.js 复习

    Buffer ArrayBuffer:ES6 中的类,代表内存中的数据 TypedArray:ES6 中的类,用来读写 ArrayBuffer 中的数据(不同视图有不同的读写...

  • Vue CLI 创建 ES6 项目

    使用 ESLint 来检测语法和代码规范 创建项目,选择手动配置,选择 ESLint + Standard config,选择 Lint on save 进入项目目录,打开 ...

  • 复习 VSCode 下

    ESLint 与 Prettier ESLint 可以检测语法和代码规范: parser 和 parserOptions 检测语法extends 和 rules 检测代码规范...

  • 复习 VSCode 上

    在 VSCode 中使用 Prettier VSCode 安装 Prettier 插件,不需要在项目目录本地安装 Prettier npm i -D prettier 在项目...

  • Webpack 5(十)配置实例

    package.json webpack.common.js webpack.prod.js webpack.dev.js

  • Webpack 5(九)Dev Server

    安装 webpack-dev-server 修改 package.json 修改 webpack.config.js 在开发模式下,devServer 自动开启一个开发服务器...

  • Webpack 5(八)加载资源

    资源的存放路径与访问路径 资源文件 打包之前,一个文件就是一个模块。模块可以是任何类型的文件(js 模块,css 文件,图像文件),模块之间存在依赖关系。这些文件作为源代码,...

  • Webpack 5(六)Loader

    什么是 loader loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将...

  • Webpack 5(五)代码分离

    如果不分离,生成一个 chunk,包含依赖图中的所有模块以及 runtime 和 manifest 代码 分离 runtime 和 manifest 代码 runtime 和...

  • Webpack 5(四)基础配置

    mode 可以在命令行或配置文件来指定 mode: 命令行: 配置文件: mode 的值可以是: none development production(默认值) none ...

  • Webpack 5(三)打包原理

    参考[https://webpack.docschina.org/concepts/under-the-hood/] 构建 将源代码转化为分发代码的过程称为构建。 源代码:用...

  • Webpack 5(二)模块依赖

    模块 一个文件就是一个模块,模块可以是任何类型的文件,原生支持 js 和 json 文件,其他类型的文件需要使用对应的 loader 转换成 js 文件。 模块的依赖关系 模...

  • Webpack 5(一)准备工作

    创建项目目录 生成 package.json 文件 修改 package.json 文件 安装 webpack 和 webpack-cli 创建配置文件

  • 初中代数(八):函数

    函数 变量与常量 y = 1.5x2 + 4,变量是 x, y,常量是 1.5, 4 函数定义 如果有两个变量 x, y,并且对于 x 的每一个确定的值,y 都有唯一确定的值...

  • 初中代数(七):根式

    二次根式:一般地,我们把形如 (a ≥ 0) 的式子叫做二次根式 双重非负性:a ≥ 0, ≥ 0 a 可以是常数,也可以是式子(整式或分式),但是必须大于等于 0 a ...

  • 初中代数(六):分式

    分式 一般地,如果 A, B 是两个整式,并且 B 中含有字母,那么式子 叫做分式,其中 A 叫做分式的分子,B 叫做分式的分母(B≠0) A, B 都是整式 B 中含有字...

  • 初中代数(五):不等式

    不等式 用 > < ≥ ≤ ≠ 表示关系的式子叫做不等式 50/x < 2/3(2/3)x > 505x + y ≥ 20-15 ≤ 2x + ya + 2 ≠ a - 2 ...

  • 初中代数(四):方程

    含有未知数的等式叫做方程,使得等式成立的 x 的值叫做方程的解,求方程的解的过程叫做解方程 元:未知数的个数,2x + 3y - 5 = 0,二元方程次:未知数的次数,2x2...

  • 初中代数(二):运算

    运算律 运算律适用于所有实数,以下a, b 均可以是任意实数 加法交换律:a + b = b + a 加法结合律:(a + b) + c = a + (b + c) 乘法交换...

个人介绍
愿我如烟还愿我曼丽又懒倦