(Примечание: я перемещаю свои посты из своего времени в Flatiron School от моего Github на эту платформу. Эта запись в блоге была впервые опубликована 29 апреля 2020 года)
WebPack и Вавилон чрезвычайно полезны, но они могут быть довольно ошеломляющими и запутанными, чтобы настроить. Честно говоря, каждый раз, когда мне нужно установить их в новом проекте, я просто ссылаюсь на старый и адаптирую его к моим текущим потребностям. Я подумал, что было бы хорошо объяснить мою настройку, и, надеюсь, это поможет другим создать свои проекты.
Что такое WebPack?
WebPack – это модульный пакет. Это позволяет вам писать ваш код в столько отдельных файлах, сколько вам нужно, и создает один выходной файл для импорта в свой HTML -файл.
Вы можете просмотреть руководство по началу работы [здесь] (( https://webpack.js.org/guides/getting-started/ ).
Что такое Вавилон?
Babel позволяет писать код, используя все новейшие и наибольшие функции Ecmascript, и преобразует его в обратный совместимый код для старых сред, которые могут не поддерживать все новейшие функции.
Вы можете просмотреть руководство по использованию Здесь Анкет
Как я настроил свои проекты
Шаг 1: Структура файла
Создать Dist Папка для вашего кода распределения. Держите свой index.html В этой папке и напишите свой код в SRC папка. Позже, когда WebPack создает файл пакета, он окажется в Dist папка.
project-folder
|_ /dist
|_ index.html
|_/src
|_ index.js
Шаг 2: Инициализируйте свой проект
// set up your package.json // using yarn: yarn init // using npm: npm init
project-folder |_ /dist |_ /src |_ package.json
Шаг 3: Добавьте зависимости WebPack:
// using yarn yarn add webpack webpack-cli webpack-dev-server --dev // using npm npm install webpack webpack-cli --save-dev
Webpack-dev-server Позволяет вам обслуживать пакет WebPack. Каждый раз, когда вы сохраняете его, будет переоборудовать и покажет вам свои изменения вживую.
Шаг 4: Open Package.json и добавьте «частное»: True, чтобы предотвратить случайную публикацию вашего кода.
Шаг 5: Создайте файл webpack.config.js в вашем корневом проекте-Folder
const path = require('path');
module.exports = {
"mode": "none",
"entry": "./src/index.js",
"output": {
"path": __dirname + '/dist',
"filename": "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, 'dist')
}
}
«Запись» – это ваш основной файл кода JS, «Path» – это то, где находится ваш файл index.html, и вы хотите, чтобы ваш пакет JS должен был идти, а «имя файла» – это имя вашего комплекта JS. DevServer Позволяет серверу Dev Webpack найти вашу папку Dist.
Подробнее о настройке Здесь Анкет
Шаг 6: Создать index.html и index.js
Создайте index.html в папке Dist и добавьте до нижней части Анкет
Создайте index.js в папке SRC. Добавьте что -то вроде оповещение ('Connected!') для испытательных целей.
|_ /dist
|_ index.html
|_ /src
|_ index.js
|_ package.json
|_ webpack.config.js
Шаг 7: Добавьте сценарии в package.json
Это то, на что выглядит мой пакет.
{
"name": "webpack_demo",
"version": "1.0.0",
"private": true,
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"scripts": {
"build": "webpack",
"dev-server": "webpack-dev-server"
}
}
Сценарии здесь – это то, что будет объединить ваш код. Бег Строительница пряжи или NPM Run Build Один раз объединит ваш код, и вы можете открыть свой index.html в своем браузере, и вы должны увидеть свое предупреждение JavaScript.
Бег пряжа запустить dev-server или npm запустить dev-server Начнет ваш локальный сервер. После того, как он работает и работает, посетите Localhost, он говорит, что проект работает в терминале (например. http://localhost: 8080/ ) и вы должны увидеть ваше предупреждение о тесте JavaScript. Используя Dev-Server, вы можете внести изменения, сохранить, и он будет автоматически повторно сбрасывать. Вам не придется беспокоиться о создании вручную и открытии вашего индекса. HTML в браузере каждый раз, когда вы вносите изменения.
Если вы хотите иметь возможность импортировать файлы CSS, вам нужно будет добавить соответствующее погрузчики к вашему webpack.config.js
CSS-Loader используется для интерпретации и разрешения импорта и Стиль-загрузчик используется для введения вашего CSS в DOM.
// npm install npm install --save-dev css-loader style-loader // yarn install yarn add --dev css-loader style-loader
Теперь добавьте правила модуля, чтобы использовать загрузки в свой файл webpack.config.
const path = require('path');
module.exports = {
"mode": "none",
"entry": "./src/index.js",
"output": {
"path": __dirname + '/dist',
"filename": "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, 'dist')
},
"module": {
"rules": [
{
"test": /\.css$/,
"use": [
"style-loader",
"css-loader"
]
},
]
}
};
Создайте папку с названием «Стили» и добавьте файл CSS внутри.
|_ /dist
|_ index.html
|_ /src
|_ index.js
|_ /styles
|_ main.css
|_ package.json
|_ webpack.config.js
Добавьте некоторый тестовый код в файл CSS:
body {
background: green;
}
Подключите свои стили к файлу index.js:
import './styles/main.css';
Теперь, когда вы запустите Dev-Server, вы должны увидеть зеленый фон.
Шаг 9: Devtools
Когда вы используете WebPack для объединения кода, если вы попытаетесь использовать инструменты Dev Browser, вы увидите весь комплексный код, и вам будет очень трудно отлаживать свой код. Вы можете добавить Devtools Для вашего webpack.config, который контролирует, как генерируются исходные карты, и тогда вы сможете увидеть написанный вами код, и отладка будет намного проще. В документах есть много разных настройки, но я использую Devtool: «дешевый модуль-эвер-источник-карта»
Шаг 10: Установите зависимости вавилоны
// using npm npm install --save-dev babel-loader @babel/core @babel/preset-env // using yarn yarn add babel-loader @babel/core @babel/preset-env --dev
@Babel/Preset-env используется так, чтобы вам не нужно беспокоиться о полифиллах или о том, какой синтаксис требуется в вашей среде.
Добавьте вабел-загрузчик в свой webpack.config
const path = require('path');
module.exports = {
"mode": "none",
"entry": "./src/index.js",
"output": {
"path": __dirname + '/dist',
"filename": "bundle.js"
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'dist')
},
"module": {
"rules": [
{
"test": /\.css$/,
"use": [
"style-loader",
"css-loader"
]
},
{
"test": /\.js$/,
"exclude": /node_modules/,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"@babel/preset-env",
]
}
}
},
]
}
};
И это в значительной степени моя установка. Проверьте документы, связанные в этом посте, чтобы узнать обо всех способах настроить свой проект.
Оригинал: “https://dev.to/robotspacefish/how-i-set-up-webpack-and-babel-with-vanilla-js-2k5e”