Собираем много js файлов в один js файл

Компьютер, программы

→

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

Собираем много js файлов в один js файл | Webpack, nodejs, expose-loader

посмотрели 1399 раз

обновлено: 23 апреля 2025

На заметку! У вас должна быть установлена Node.js. Если у вас ее нет то нужно скачать и установить Node.js ...

Структура файлов:

my_webpack_files

index.html

package.json

webpack.config.js

src

index.js

my1.js

my2.js

Скачать пример:

my_webpack_files.zip ...
размер: 3 kb

Шаг 1. Создадим новую папку my_webpack_files

Я создадю у себя на диске D: новую папку my_webpack_files

D:/my_webpack_files

Шаг 2. Создадим новые js файлы

Создадим новые файлы в папке src:

D:/my_webpack_files/src/

index.js

my1.js

my2.js

Файл my1.js

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

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

module.exports = {
     hello,
     goodbye,
};

Файл my2.js

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

module.exports = {
getName,
};

Файл index.js

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

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

Шаг 3. Создадим новый файл index.html

Создадим новый файл index.html в папке:

D:/my_webpack_files/

Файл 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>

На заметку!
webpack сгенерирует 1 js файл и будет тут:/dist/transformed.js

Шаг 4. Создадим новый файл package.json

Создадим новый файл package.json в папке:

D:/my_webpack_files/

Файл package.json

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

Шаг 5. Создадим новый файл webpack.config.js

Создадим новый файл webpack.config.js в папке:

D:/my_webpack_files/

Файл 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'),
     }
};

Шаг 6. В командной строке устанавливаем npm пакеты для этого выполним команду npm install

npm install

вот так выглядит:

На заметку!
Эта команда выполняется только 1 раз для установки пакетов

Шаг 7. Собираем много js файлов в один js файл для этого выполним npm run MyBuild

npm run MyBuild

вот так выглядит:

webpack сделал 1 js файл /dist/transformed.js

Все готово!

Запустим index.html

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

Ваши Отзывы ... комментарии ...

Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус

Объявления

• Что такое 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 (пишем нашу компоненту)

Собираем js файлы в один js файл

• Собираем много js файлов в один js файл | Webpack, nodejs, expose-loader