如何拆分文件并使用 Webpack 输出？这是为了避免 WSH 容量限制

Question

我的母语不是英语，所以如果觉得阅读困难，我很抱歉。

我正在创建一个库。
https://github.com/standard-software/partsjs/tree/v9.2.0

我正在使用 Webpack 进行构建，它使用起来很舒服。

有一个问题。
Parts.js曾经支持WSH，但是文件变大了，已经超过512KB。

在现代项目中使用这种大小的文件是没有问题的，但只有在 WSH 环境中的操作是有问题的。 WSH 文件链接似乎有一个限制，只能接受 512KB。

Windows Script Host file size limit \ Cannot retrieve referenced URL exception

Cannot retrieve referenced URL

VBScript 最大脚本大小？ - VBScript - 技术提示
https://www.tek-tips.com/viewthread.cfm?qid=1345627

Windows 脚本宿主：无法检索引用的 URL（512KB 文件大小）·问题 #7·cbaxter/JSTest.NET
https://github.com/cbaxter/JSTest.NET/issues/7

这是一个令人难以置信的限制，但我试图放弃 WSH 环境，因为 WSH 环境太老了，无能为力。我可以使用 Webpack 构建设置做什么？

是问题。

我会写我自己的答案。

Answer 1

更改 Webpack.config.js 中的设置。

使用 webpack.optimize.AggressiveSplittingPlugin。

具体代码在这里
https://github.com/standard-software/partsjs/tree/v10.0.0/config

正常的构建是这样描述的。

module.exports = {
  mode: 'none',
  entry: ['./build/babel_webpack/babel/index.js'],
  output: {
    filename: 'parts.js',
    path: __dirname + '/../build/babel_webpack/webpack/',
    library: 'parts',
    libraryTarget: 'umd',
    globalObject: 'this',
  },
};

您将只有一个名为 parts.js 的文件。

只有 WSH 的构建是这样制作的。

const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: ['./build/babel_webpack/babel/index.js'],
  output: {
    filename: 'parts.js',
    path: __dirname + '/../build/babel_webpack/webpack_forWsh/',
    library: 'parts',
    libraryTarget: 'umd',
    globalObject: 'this',
  },
  plugins: [
    new webpack.optimize.AggressiveSplittingPlugin({
      minSize: 1000,
      maxSize: 200000,
    }),
  ],
};

这会将文件拆分为 200KB 并创建多个文件。

1.parts.js
2.parts.js
parts.js

将其链接到 WSH JScript 文件时

<script language = "JavaScript" src = "xxx / 2.parts.js"> </ script>
<script language = "JavaScript" src = "xxx / 1.parts.js"> </ script>
<script language = "JavaScript" src = "xxx / parts.js"> </ script>

这样写，就可以正常工作了。

我不知道怎么做，所以绕了很多路。

最初是 512KB 或更少
https://github.com/standard-software/partsjs/blob/v7.6.0/config/

只有测试代码超过512KB，只好伪装require
https://github.com/standard-software/partsjs/blob/v8.0.0/config/

ver9.0.0后主体代码也超过512KB，放弃支持。

webpack.config.js 我终于弄明白如何使用 webpack.optimize.AggressiveSplittingPlugin
https://github.com/standard-software/partsjs/tree/v10.0.0/config

我非常感谢 Webpack 也能做到这一点。 我考虑过其他捆绑工具，但选择 Webpack 对我有很大帮助。

如果你还想打 WSH 项目，你可以通过构建设置让超过 512KB 的项目正常工作。

无论是庞大的库，还是babel/webpack环境下的庞大应用，都有webpack.optimize.AggressiveSplittingPlugin，所以还是可以打的好。

希望大家可以参考构建方法。