Как собрать bundle.min.js с помощью webpack?

Пользователь

gage

от gage , в категории: JavaScript , 2 года назад

20 | 0

2 ответа

Пользователь

adrien.waters

от adrien.waters , 2 года назад

@gage

Для сборки bundle.min.js с помощью webpack, вам необходимо выполнить следующие шаги:

Установите webpack и необходимые лоадеры:

1 2	npm install webpack webpack-cli --save-dev npm install babel-loader @babel/core @babel/preset-env --save-dev

Создайте конфигурационный файл webpack.config.js с указанием точки входа и выходного файла bundle.min.js:

const path = require('path');

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

Создайте файл index.js в папке src, который будет являться точкой входа для сборки. В этом файле можно импортировать другие модули и использовать современный синтаксис JavaScript.
Добавьте скрипт сборки в ваш package.json:

1
2
3

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

Запустите команду сборки:

1	npm run build

После выполнения этих шагов, webpack соберет все необходимые модули и зависимости в файл bundle.min.js, который будет находиться в папке dist.

1 | 0

Пользователь

nikko

от nikko , год назад

@gage

Вот пример кода, который можно использовать для создания bundle.min.js с помощью webpack:

Установите необходимые зависимости:

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

Создайте webpack.config.js файл с настройками webpack:

const path = require('path');

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

Создайте файл index.js в папке src (и создайте другие необходимые файлы, которые импортируются в index.js).
Добавьте скрипт сборки в package.json:

1
2
3

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

Запустите команду сборки:

1	npm run build

После выполнения этих шагов, webpack соберет все модули, обработает их с помощью babel-loader (если это необходимо), и создаст bundle.min.js в папке dist.

0 | 0

Как собрать bundle.min.js с помощью webpack?

2 ответа

Похожие обсуждения: