Assembling many js files into one js file | Webpack, nodejs, expose-loader

Programming, development, testing

→

Webpack - это САМЫЙ ПОПУЛЯРНЫЙ менеджер пакетов. Webpack добавляет JavaScript библиотеки в ваш проект

→

Assembling many js files into one js file | Webpack, nodejs, expose-loader

Looked at 356 times

Assembling many js files into one js file | Webpack, nodejs, expose-loader

last updated: 23 April 2025

Note! You must have Node.js installed. If you don't have it, then need to download and install Node.js ...

File structure:

my_webpack_files

index.html

package.json

webpack.config.js

src

index.js

my1.js

my2.js

Download an example:

my_webpack_files.zip ...
size: 3 kb

Step 1. Create a new folder my_webpack_files

I'll create a new folder my_webpack_files on my disk D:

D:/my_webpack_files

Step 2. Let's create new js files

Let's create new files in the src folder:

D:/my_webpack_files/src/

index.js

my1.js

my2.js

File my1.js

function hello () {
     return "Good Evening!";
};

function goodbye () {
     return "Good Bye!";
};

module.exports = {
     hello,
     goodbye,
};

File my2.js

function getName () {
return "Evgen";
};

module.exports = {
getName,
};

File index.js

import my1 from './my1.js';
import my2 from './my2.js';

window.my1 = my1;
window.my2 = my2;

Step 3. Let's create a new file index.html

Let's create a new file index.html in the folder:

D:/my_webpack_files/

File index.html

<html>
     <head>
          <meta charset='utf-8'>
          <title>My webpack files</title>
     </head>

     <script src="./dist/transformed.js"></script>

     <script>
          alert(my1.hello());
          alert(my2.getName());
     </script>

</html>

Note!
webpack will generate 1 js file and it will be here:/dist/transformed.js

Step 4. Let's create a new file package.json

Let's create a new file package.json in the folder:

D:/my_webpack_files/

File package.json

{
     "scripts": {
          "MyBuild": "webpack"
     },
     "devDependencies": {
          "expose-loader": "^5.0.1",
          "webpack-cli": "^6.0.1"
     }
}

Step 5. Let's create a new file webpack.config.js

Let's create a new file webpack.config.js in the folder:

D:/my_webpack_files/

File webpack.config.js

const path = require('path');

module.exports = {
     mode: 'production',

     entry: path.resolve(__dirname, 'src/index.js'),

     output: {
          filename: 'transformed.js',
          path: path.resolve(__dirname, 'dist'),
     }
};

Step 6. At the command line, install npm packages, for this we will run the command npm install

npm install

This is what it looks like:

Note!
This command is run only 1 time to install packages

Step 7. Assemble many js files into one js file, for this we will run npm run MyBuild

npm run MyBuild

This is what it looks like:

webpack made 1 js file /dist/transformed.js

You're all set!

Let's run index.html

← Previous topic
Проект React в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы,библиотеки в один js) + Babel (расширенная js функциональность т.е. это jsx, классы) + React (пишем нашу компоненту)

Your feedback ... Comments ...

Объявления

• Что такое Webpack ?

Проект TypeScript (node.js , webpack , typescript)

• Проект TypeScript в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы в один js) + Typescript (конвертация файлов ts в js)

Проект React (node.js , webpack , babel , react)

• Проект React в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы,библиотеки в один js) + Babel (расширенная js функциональность т.е. это jsx, классы) + React (пишем нашу компоненту)

Assembling js files into one js file

• Assembling many js files into one js file | Webpack, nodejs, expose-loader