Как заставить Webpack компилировать модуль вместе с проектом?

Webpack компилирует JavaScript модули и ресурсы проекта в оптимизированный бандл, который может быть использован в браузере. Для того чтобы Webpack компилировал модуль вместе с проектом, вам потребуется сделать следующие шаги:

1. Установите Webpack и необходимые плагины:
- Для установки Webpack выполните команду в командной строке:

     npm install webpack --save-dev

- Установите Babel плагин, если вы хотите компилировать модули ECMAScript 6/7 в более старые версии JavaScript:

     npm install babel-loader @babel/core @babel/preset-env --save-dev

- Установите CSS-плагины, если вы хотите компилировать модули CSS:

     npm install style-loader css-loader --save-dev

- Установите другие необходимые плагины в зависимости от ваших требований.

2. Создайте конфигурационный файл Webpack.
- Создайте файл webpack.config.js в корневой директории вашего проекта.
- Внутри файла определите конфигурацию Webpack, указав точку входа и место, куда будет сгенерирован бандл.

Пример конфигурации Webpack:

   const path = require('path');

   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
     },
     module: {
       rules: [
         {
           test: /.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         },
         {
           test: /.css$/,
           use: ['style-loader', 'css-loader']
         }
       ]
     }
   };

В приведенном примере entry указывает на точку входа проекта. Модули, импортированные внутри этого файла, будут включены в итоговый бандл. output определяет путь и имя файла, куда будет сгенерирован бандл.

3. Настройте скрипты в файле package.json.
В файле package.json в секции scripts добавьте команду для запуска Webpack:

   {
     "scripts": {
       "build": "webpack --config webpack.config.js"
     }
   }

Теперь вы можете выполнить следующую команду в командной строке:

   npm run build

Это запустит Webpack и сгенерирует бандл в соответствии с настройками в файле webpack.config.js.

4. Создайте модуль и импортируйте его в точку входа проекта.
- Создайте новый файл в вашей проектной директории, например src/module.js.
- Внутри файла определите модуль, который будет компилироваться вместе с проектом.

Пример модуля:

   export function hello() {
     console.log('Hello, World!');
   }

- В файле src/index.js импортируйте созданный модуль и используйте его.

   import { hello } from './module';

   hello();

При выполнении команды npm run build Webpack автоматически определит импортированный модуль и добавит его в итоговый бандл.

5. Запустите сборку проекта.
Выполните команду npm run build для запуска Webpack и сборки проекта. После выполнения этой команды будет сгенерирован бандл в соответствии с настройками Webpack и модуль будет компилироваться вместе с проектом.

Теперь ваш модуль будет компилироваться вместе с проектом при каждой сборке с использованием Webpack.