如何使用 Webpack 包含/导入整个 JS 文件

Question

我是 Webpack 的新手，但我习惯于按以下方式构建我的 Web 应用程序：

1. 为项目声明一个全局变量。
2. 创建几个使用全局变量声明函数和变量的JS文件
3. 将这些单独的js文件链接到HTML文件中，去生产的时候组合起来。

例如，我的第一个 JS 文件是“init.js”：

let FP = {}; // Global Object

我的第二个是“processing.js”：

FP.addNumbers = function(a, b){
  return a+b;
}

HTML 将包括：

 <script src="init.js"></script> 
 <script src="processing.js"></script> 

然后在生产中我使用我编写的节点插件来解析 HTML 页面并将所有 JS 文件合并为一个。

我想用 Webpack 做一些类似的事情，但我发现合并文件的唯一方法是使用“包含”。这要求每个文件使用单独的变量名。

我实际上只是想将我单独的 JS 文件的内容转储到 init.js 中。有没有办法做到这一点？

Answer 1

如果你打算使用 Webpack 来打包你的代码，正确的方法是利用模块化导入和导出来协调模块之间的数据，否则使用Webpack 并没有真正为您做任何事情。

例如，在这里，尝试以下操作：

// index.js
import { addFns } from './addFns.js';

const FP = {};
window.FP = FP; // use this if the object needs to be global
addFns(FP);

// addFns.js
export const addFns = (FP) => {
  FP.addNumbers = function(a, b){
    return a+b;
  }
};

然后，Webpack 可以自动创建仅包含一个 .js 文件作为输出的完整包，并且可以通过更多的后期处理为生产做好准备。