Как собрать bundle.min.js с помощью webpack?
Как собрать bundle.min.js с помощью webpack?
2 ответа
от
adrien.waters ,
9 месяцев назад
@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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
от
nikko ,
13 дней назад
@gage
Вот пример кода, который можно использовать для создания bundle.min.js с помощью webpack:
- Установите необходимые зависимости:
1
|
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev |
- Создайте webpack.config.js файл с настройками webpack:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
15