Автор оригинала: FreeCodeCamp Community Member.
Ashish Nandan Singh
Вступление
Хорошо, так что я предполагаю, что вы слышали о WebPack – вот почему вы здесь, верно? Реальный вопрос в том, что вы знаете об этом? Вы можете знать несколько вещей об этом, как это работает, или у вас может быть абсолютно никакой подсказки. В любом случае, я могу заверить вас, что после прочтения этой статьи вы, вероятно, достаточно чувствуете себя комфортно со всеми Ситуация WebPack .
Ведь – Необходимость мать изобретение…
Идеальный способ сказать, почему WebPack существует, является вышеуказанная цитата. Но чтобы лучше понять, нам нужно вернуться назад, вернуться назад, чтобы когда JavaScript не был новой сексуальной вещью, в тех старых разовых возрастах, когда сайт был просто небольшим расслоением . HTML, CSS и, вероятно, один или несколько файлов JavaScript в некоторых случаях. Но очень скоро все это собирается измениться.
В чем была проблема?
Все сообщество DEV было вовлечено в постоянный поиск по улучшению общего пользователей и опыта разработчика вокруг использования и создания приложений JavaScript/Web. Поэтому мы видели много нового Библиотеки и рамки введен.
Несколько Дизайн шаблонов Также развивалось с течением времени, чтобы дать разработчикам лучше, более мощный, но очень простой способ написания комплексных приложений JavaScript. Веб-сайты до того, как были не более просто небольшой пакет с нечетным количеством файлов в них. Они заявили о том, чтобы стать громоздкими, с введением JavaScript модули Как написание инкапсулированных небольших кусков кода была новая тенденция. В конце концов все это приводит к ситуации, когда у нас было 4x или 5x, он файлов в общем приложении.
Не только общий размер приложения вызов, Но также был огромный разрыв в виде разработчиков кода пишут, а вид браузеров кода могут понять. Разработчики должны были использовать много помощника под названием Polyfills Чтобы убедиться, что браузеры смогли интерпретировать код в своих пакетах.
Чтобы ответить на эти проблемы, был создан WebPack. WebPack – это статический модуль Bundler.
Так как же был взять на себя ответ?
Вкратце, WebPack проходит через вашу посылку и создает, что он называет График зависимости который состоит из разных модули Какой ваш WebApp потребуется для функции, как и ожидалось. Затем, в зависимости от этого графика, он создает новый пакет, который состоит из очень горючего минимального количества требуемых файлов, часто только один файл Bundle.js, который можно легко подключить к файлу HTML и использовать для приложения.
По поводу следующей части этой статьи я возьму вас через шаг на STEP SETUP WEBPACK. К концу, я надеюсь, что вы понимаете основы WebPack. Так что давайте получим этот прокат …
Что мы строим?
Вы, наверное, слышали о Реагирует. Если вы знаете REVENTJS, вы, вероятно, знаете, что Create-React-App является. Для тех из вас, кто понятия не имеет, что такое из этих двух вещей, Reactjs – это библиотека пользовательского интерфейса который очень полезен в здании интеллектуального комплекса УИС, и Create-React-App – это инструмент CLI Для настройки или загрузки настройки DEV Boilerplate для создания приложений RACT.
Сегодня мы создам простое приложение React Application, но без использования CLI Create-React-App. Я надеюсь, что это звучит достаточно веселым для вас.:)
Фаза установки
NPM INT
Это верно, вот как почти все хорошие вещи начинаются: простой старый NPM init. Я буду использовать VS-код, но не стесняйтесь использовать любой редактор кода, который вам нравится получать вещи.
Прежде чем вы сможете сделать любой из этого, подумал, убедитесь, что у вас есть последние Nodejs и NPM Версия установлена локально на вашем компьютере. Нажмите на каждую из этих ссылок, чтобы узнать больше о процессе.
$ npm init
Это создаст пакет стартера и добавить для нас файл Package.json. Здесь будут упомянуты все зависимости, необходимые для создания этого приложения.
Теперь для создания простого приложения RACT нам нужны две основные библиотеки: реагировать и реагировать. Итак, давайте добавим их в качестве зависимостей в наше приложение, используя NPM.
$ npm i react react-dom --save
В ближайшее время нам нужно добавить WebPack, поэтому мы можем объединить наше приложение вместе. Не только Bundle, но нам также потребуется горячая перезагрузка, которая возможна с помощью сервера WebPack Dev.
$ npm i webpack webpack-dev-server webpack-cli --save--dev
--save - Dev Укажите, что эти модули являются просто разработками зависимостями. Теперь, поскольку мы работаем с React, мы должны иметь в виду, что реагирование использует классы ES6 и отчетности Import, что все, что все браузеры могут не быть в состоянии понять. Чтобы убедиться, что код читается всеми браузерами, нам нужен инструмент, похожий на Babel, чтобы транспортировать наш код на обычный читаемый код для браузеров.
$ npm i babel-core babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev
Ну, что я могу сказать, это было максимальное количество установок, которые я обещаю. В случае Babel мы сначала загрузили библиотеку Core Babel Babel, а затем погрузчик, и, наконец, 2 плагина или пресеты, специально для работы с React и всеми новыми кодом ES2015 и ES6.
Перемещение, давайте добавим какой-код и давайте запустим конфигурацию WebPack.
Это как файл package.json должен посмотреть все установки до сих пор. У вас может быть другой номер версии в зависимости от того, когда вы следуете за этой статьей.
Код
Давайте начнем с добавления webpack.config.js Файл в корне нашей структуры приложения. Добавьте следующий код в файл WebPack.config.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//This property defines where the application starts
entry:'./src/index.js',
//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
// Setup plugin to use a HTML file for serving bundled js files
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}Хорошо, так что давайте понять линии выше.
Сначала мы начнем, требуя от модуля путей по умолчанию для доступа к местоположению файла и вносить изменения в местоположение файла.
Далее нам требуется HTMLWebPackPlugin для генерации HTML-файла, который будет использоваться для обслуживания в комплекте файла/файлов JavaScript. Узнайте больше о Htmlwebpackplugin нажав на ссылку.
Тогда у нас есть объект Export.Module с некоторыми свойствами в них. Первый – это Въездное свойство, который используется для указания, какой файл WebPack должен начать с того, чтобы создать внутренний график зависимости.
module.exports = {
entry:'./src/index.js'
}Next UP – это свойство вывода, указав, в котором должен быть сгенерирован подключенный файл и то, как будет название файла подключенного файла. Это делается по вывод. Пути и Вывод. Фальтерама характеристики.
module.exports = {
//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
}В дальнейшем погрузчики. Это указать, какой WebPack должен делать для определенного типа для файла. Помните, что веб-пакет из коробки понимает только JavaScript и JSON, но если у вашего проекта есть любой другой язык, это было бы место для уточнения того, что делать с этим новым языком.
module.exports = {
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}Информация должна быть указана в объекте для каждого свойства модуля, которое дополнительно имеет массив правил. Там будет объект для каждого случая. Я также уточнил, чтобы исключить все в моем папке Node_Modules.
Next UP – свойство плагина. Это используется для расширения возможностей WebPack. Перед использованием плагина в массиве плагина внутри объекта экспорта модуля нам необходимо потребовать то же самое.
module.exports = {
// Setup plugin to use a HTML file for serving bundled js files
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}Этот конкретный плагин, как объяснено ранее, будет использовать указанный файл в нашей папке SRC. Затем он будет использовать в качестве шаблона для нашего HTML-файла, где все подключенные файлы будут автоматически вводиться. Есть много других из плагинов коробки, которые мы могли бы использовать – Оформить заказ Официальная страница для дополнительной информации.
Последнее, что нам нужно сделать, это создать файл .babelrc Чтобы использовать предустановку Babel Preset We установить и позаботиться о классах ES6 и отчетности импорта в нашем коде. Добавьте следующие строки кода на файл .babelrc.
{
"presets": ["env", "react"]
}И так же, как это, теперь Бабел сможет использовать эти пресеты. Хорошо, настолько достаточно для установки – Давайте добавим код React Code, чтобы увидеть, как это работает.
Реагнийный код
Поскольку отправная точка для приложения является файл index.js в папке SRC, давайте начнем с этого. Мы начнем, требуя от обоих Реагировать и Реагировать для нашего использования в этом случае. Добавьте код ниже в вашем файле index.js.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './Components/App'; ReactDOM.render(, document.getElementById('app'));
Таким образом, мы просто импортируем еще один файл из нашей папки компонентов, которые вы будете создавать, и добавить другой файл в папке под названием App.js. Итак, давайте посмотрим, что находится внутри файла app.js:
import React, { Component } from 'react'
class App extends Component {
render() {
return (
Webpack + React setup
)
}
}
export default App;Мы почти закончили. Единственное, что осталось сейчас, – это включить горячую перезагрузку. Это означает, что каждый раз, когда обнаружено изменение, браузер Auto перезагружает страницу и имеет возможность создавать и объединять все приложение, когда придет время.
Мы можем сделать это, добавив значения скрипта в файл Package.json. Удалите свойство Test в объекте сценариев вашего Package.json File и добавьте эти два скрипта:
"start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production"
У вас все настроено! Перейдите в свой терминал, перейдите к корневой папке и запустите NPM начать. Он должен запустить SEV Server на вашем компьютере и обслуживать файл HTML в вашем браузере. Если вы внесите какие-либо незначительные/основные изменения и сохранить код, ваш браузер будет автоматически обновлен, чтобы показать последний набор изменений.
Как только вы думаете, что вы готовы получить приложение в комплекте, вам просто нужно ударить команду, NPM Build, И WebPack создаст оптимизированный комплект в папке проекта, которая может быть развернута на любом веб-сервере.
Заключение
Это просто небольшое приложение или использование случая WebPack и Babel, но приложения безграничны. Я надеюсь, что вы достаточно взволнованы, чтобы исследовать больше вариантов и способов делать вещи с WebPack и Babel. Пожалуйста, обратитесь к своим официальным сайтам, чтобы узнать больше и прочитать глубину.
Я создал REPO GitHub со всем этим кодом, поэтому, пожалуйста, обратитесь к нему в случае любых вопросов.
AshishCodes4/WebPack-React-Setup Установка приложения React с нуля без использования CLI – AshishCodes4/WebPack-React-Setup github.com
Мои два цента о WebPack? Ну, порой вы можете подумать, что это не более, чем инструмент, и почему вы должны беспокоить слишком много для инструмента? Но поверь мне, когда я говорю это: начальная борьба, изучая ваш путь вокруг WebPack, сэкономит вам огромное количество часов, которое вы в противном случае их инвестируют в разработку без учета WebPack.
Это все сейчас, надеюсь вернуться с еще одной интересной статьей. Я надеюсь, что вам понравилось читать этот!
Если вы сталкиваетесь с любыми проблемами или проблемами, следуя любым из вышеупомянутых шагов/процессов, пожалуйста, не стесняйтесь связаться и оставлять комментарии.
LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/
Twitter: https://twitter.com/ashishnandansin.
Оригинал: “https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/”