将文件合并到 Webpack 的条目中答案

【问题标题】：Merge files into entry for Webpack将文件合并到 Webpack 的条目中
【发布时间】：2018-04-01 13:54:00
【问题描述】：

背景：

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

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

就目前而言，我们让 Grunt 将所有文件连接在一起，然后我们通过 uglify 运行它。

我“排序”成功复制我们使用 Grunt 所做的唯一方法是使用脚本加载器。

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

问题：

在 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，这些纯 JS 可由 weback 生成的任何 JS 文件访问...

尝试使用 script-loader 和 concat 插件，但没有成功。

我正在使用 Webpack 4

【问题讨论】：

标签： javascript webpack gruntjs uglifyjs

【解决方案1】：

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

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

很想只用 webpack 来做这一切，但我认为这是一个愉快的妥协，意味着我可以摆脱 grunt。

【讨论】：

你有简单的演示吗？谢谢

【解决方案2】：

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

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

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

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

更新：如果您想在 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 运行它

【讨论】：

感谢您的回复和信息。正如我在上面的回答中提到的，这就是我最终做的事情......最终我会将所有内容都转换为 es6 类/模块，但它是一个非常大的遗留项目，所以过渡会很慢

【解决方案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);
    });
};

【讨论】：