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

Question

I am new to Webpack, but I have a habit of building my web apps in the following manner:

1. Declare a global variable for the project.
2. Create several JS files that use the global variable to declare functions and variables
3. Link these separate js files in the HTML file, and combine them when going to production.

For example my first JS file would be "init.js":

let FP = {}; // Global Object

My second would be "processing.js":

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

The HTML would include:

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

Then in production I use a node plugin I wrote to parse the HTML page and combine all the JS files into one.

I want to do something similar with Webpack, but the only way I found to combine files is with "include". Which requires each file use a separate variable name.

I literally just want to dump the contents of my separate JS files into init.js. Is there a way to do this?

Answer 1

If you're going to use Webpack to bundle your code, the right approach to something like this would be to take advantage of modular imports and exports to coordinate data between modules, otherwise the use of Webpack isn't really doing anything for you.

For example, here, try the following:

// 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;
  }
};

Then, Webpack can create the complete bundle with only a single .js file as output automatically, and it'll be ready for production with any more post-processing.