将文件合并到 Webpack 的条目中

Question

背景：

我的任务是将使用多种构建工具的 JS 库转换为仅使用 Webpack 的库，最终我们将重构代码以使用 es6 类。

目前该库已有 10 多年的历史，它由多个相互关联的文件组成，这些文件可以相互交互/相互依赖（意大利面条代码丰富！）。将所有块合并后成为一个 IIFE 文件，该文件添加了对 window 对象的特定调用。

目前我们有 G运行t 将所有文件连接在一起，然后我们通过 uglify 运行它。

我 "sort" 关闭复制我们用 G运行t 所做的事情的唯一方法是使用脚本加载器。

脚本加载器的问题在于它会全局公开所有内容，并且由于我正在处理的库包含多个可以相互依赖的块，因此这还不够。

问题：

在 webpack 中有没有一种方法可以将多个文件（块）连接成一个文件？

例如：

chunkA.js

var varFromChunkA = "hello";
function methodFromA(){}

chunkB.js

console.log(varFromChunkA);
methodFromB();

entry.js

console.log(varFromChunkA + ' World');
methodFromA();
methodFromB();

最终我希望 entry.js 的输出能够访问来自 chunkA 和 B 等的变量/方法，而无需模块。（整个库被分成基于代码的命名空间，根本没有模块）。

所以结合上面的块，我希望 webpack 输出如下内容：

var varFromChunkA = "hello";
function methodFromA(){}

console.log(varFromChunkA);
methodFromB();

/***Webpack Code***/
//Entry.js file
//I can access the objects / methods defined above
console.log(varFromChunkA +' World from inside entry.js');
/*** End of Webpack Code **/

并且在加载 js 时在浏览器控制台中我期望：

Hello

Hello World

Hello World from inside entry.js

这可能吗？

本质上，我希望 Webpack 的输出包含一些纯 JS，webpack 生成的任何 JS 文件都可以访问这些纯 JS...

尝试使用脚本加载器和 concat 插件，但没有成功。

我正在使用 Webpack 4

Answer 1

到目前为止我解决它的方法是对需要全局公开的文件部分使用脚本加载器。其余的我正在使用节点脚本将它们连接在一起。

然后将所有文件的组合传递给 webpack。

很想只用 webpack 来完成所有这些，但我认为这是一个令人愉快的妥协，意味着我可以摆脱 grunt。

Answer 2

webpack 通常与 es6 模块、amd 或 commonjs 等模块导入系统结合使用。

您打算做的是另一种方法，而不是 webpack 的本意。

所以如果你想重构代码以使用 es6 类无论如何，我建议也引入 es6 模块系统！

这样您就可以按照预期的方式自然地使用 webpack。

更多信息：http://exploringjs.com/es6/ch_modules.html#sec_basics-of-es6-modules

更新：如果你想在 webpack 处理后将文件与其他文件连接起来，只需使用脚本即可！您可以使用 javascript 甚至 bash (cat chunkA.js chunkB.js entry.js > bundled.js)

您甚至可以将此 bash 代码添加到 package.json 的脚本部分，如下所示：

"bundle": "cat chunkA.js chunkB.js entry.js > bundled.js"

和运行它与npm run bundle

Answer 3

已经有一段时间了，但如果有帮助的话。
按照@Bynho 的想法，我找到了一个解决方案，方法是使用一个脚本节点“concat”直接关联到配置中，并带有一个承诺...
我在这里使用 doc 中建议的 3 个配置文件来适应您的需求。
我发现这种做法很有用，因为毕竟它允许自动化，而不必为此做太多工作。

(webpack 4.)
在文件中 "webpack.common.js"

module.exports = {
    entry: {
        app: './src/concatened.js',
    },
... config
}

在文件中"webpack.dev.js"

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const concat = require('concat');

const result = concat(['./src/utils.js', './src/index.js'],
        './src/concatened.js')
    .then(result => merge(common, {
        mode: 'development',
        ... config
    }));

module.exports = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(result);
            reject((err) => console.log(err));
        }, 10);
    });
};

将文件合并到 Webpack 的条目中

Merge files into entry for Webpack

javascript

webpack

gruntjs

uglifyjs