Оригинальная ссылка:Webpack 4 Tutorial: from 0 Conf to Production Mode
webpack 4Вышло!
Этот популярный инструмент для упаковки модулей получил серьезное обновление.
webpack4, что такоевозобновить? существенныйоптимизация производительности, нулевая конфигурация и толковыйраспределение по умолчанию.
webpack 4, сборщик модулей с нулевой конфигурацией
webpack — это мощный инструмент со множеством уникальных функций, но одной из его основных проблем являетсяконфигурационный файл
Предоставление файла конфигурации для средних и крупных проектов не представляет большой сложности. Ты даже не можешь оставить это. Тем не менее, это может быть немного хлопотно для некоторых небольших приложений, особенно если вы хотите начать создавать забавные приложения по прихоти.
Это тожеПосылка привлекательнапричина
Хорошие новости теперь это webpack 4Больше нет необходимости в конфигурационном файле по умолчанию!
webpack 4: запуск нулевой конфигурации
Создайте каталог, а затем введите
mkdir webpack-4-quickstart && cd $_
Инициализируйте package.json:
npm init -y
Установите веб-пакет4:
npm i webpack --save-dev
Нам также нужно установить еще один пакет:webpack-cli
npm i webpack-cli --save-dev
затем откройтеpackage.jsonДобавьте скрипт сборки:
"scripts": {
"build": "webpack"
}
закрыть сохранить
попробуй убежать
npm run build
тогда мы видим
ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
webpack 4 должен найти файл входа в каталоге ./src! Если вы не знаете, что это значит, пожалуйста, обратитесь ко мнепредыдущая статья
Вкратце: веб-пакету нужен этот входной файл, чтобы начать упаковку кода js.
В предыдущих версиях входной файл веб-пакета необходимо было указать в файле конфигурации webpack.config.js.
Но теперь его указывать не нужно, он по умолчанию выберет файл ./src/index.js.
Протестировать эту новую функцию легко, создайте./src/index.js:
console.log(`I'm a silly entry point`);
восстановить:
npm run build
ты будешь~/webpack-4-quickstart/dist/main.jsПолучите упакованные файлы.
Какой? Подождите минутку. Вообще не нужно указывать выходной файл? да.
в вебпаке 4Нет необходимости указывать файлы входа и выхода.
Настоящая сила webpack — это разделение кода. Но поверьте мне, есть инструмент без настройки, который может ускорить ваш процесс.
Итак, это первая новая функция: по умолчанию он будет использовать ./src/index.js в качестве файла входа и поместить упакованный файл в ./dist/main.js.
Еще одну полезную функцию мы можем увидеть после следующей главы:Режим производства и разработки.
Webpack 4: режим производства и разработки
Обычно в webpack есть два файла конфигурации.
Типичный проект должен иметь:
- Одинконфигурационный файл для разработки, используется для определения сервера разработки webpack и других вещей
- ОдинФайл конфигурации для рабочей среды, определятьUglifyJSPlugin, исходная карта и прочее.
В webpack4 вы можете написать одну строку конфигурации.
Как ты сделал это?
Webpack 4 представил режим производства и разработки.
На самом деле, если вы обратите вниманиеnpm run buildВ выводе вы увидите это предупреждение:
Параметр «режим» не установлен. Установите для параметра «режим» значение «разработка» или «производство», чтобы включить значения по умолчанию для этой среды.
Что это означает? Давайте посмотрим.
Откройте файл package.json и добавьте следующий скрипт
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
Теперь запустите:
npm run dev
Проверьте файл ./dis/main.js. Что ты видишь? Ну, я знаю, он не сжат!
Теперь это:
npm run build
Посмотри теперь, что ты видишь? Сжатый файл!
Да!
Производственный режим включает кучу дополнительных оптимизаций. Включая минимизацию, подъем области видимости, встряхивание деревьев и т. д.
С другой стороны, режим разработки оптимизирован для скорости и не делает ничего, кроме предоставления несжатого пакета.
Итак, это вторая новая функция: режим производства и разработки.
В webpack4 вам не нужна ни одна строка конфигурации, только опция --mode.
webpack 4: переопределить файлы входа/выхода по умолчанию
Мне нравится нулевая конфигурация webpack4, но что, если я хочу переопределить конфигурацию входа или выхода по умолчанию?
существуетpackage.jsonНастройте их.
Вот пример
"scripts": {
"dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
"build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}
webpack 4: преобразование кода ES6 js с помощью Babel
Современный JavaScript в основном написан на ES6.
Но не все браузеры умеют работать с ES6. Нам нужно сделать некоторые преобразования.
Этапы этого преобразования называютсяtranspiling. Транспиляция относится к преобразованию ES6 в код, понятный браузерам.
сам webpack не умеет конвертировать, но у него естьloaders. Думайте о них как о преобразователях.
babel-loaderЭто загрузчик для веб-пакета, который может конвертировать код выше ES6 в ES5.
Чтобы использовать этот загрузчик, нам нужно установить ряд зависимостей. особенно:
- babel-core
- babel-loader
- babel-preset-env (для компиляции кода Javascript ES6 до ES5)
Давайте установим его:
npm i babel-core babel-loader babel-preset-env --save-dev
Затем мы создаем файл .babelrc в каталоге проекта для настройки Babel.
{
"presets": [
"env"
]
}
Здесь у нас есть два способа настройки babel-loader:
- Конфигурационный файл с вебпаком
- использовать в скриптах npm
--module-bind
О, я знаю, о чем ты думаешь. webpack4 позиционирует себя как инструмент с нулевой конфигурацией. Почему мы должны снова писать файлы конфигурации.
Нулевая конфигурация webpack 4 работает с:
- входной файл. По умолчанию это ./src/index.js.
- Экспорт файла. По умолчанию это ./dist/main.js.
- Режим производства и разработки(Нет необходимости создавать два набора файлов конфигурации)
Достаточно. Для загрузчиков нам все еще нужно использовать файлы конфигурации.
Я спросил об этом Шона. Загрузчики в webpack4 такие же, как в webpack3? Планируется ли предоставлять нулевую конфигурацию для таких универсальных загрузчиков, как babel-loader?
Его ответ был:
В будущих версиях (после v4, может быть, 4.x или 5.0) мы начали изучать, как пресеты или дополнительные системы могут помочь нам определить это. Чего мы не хотим: напихать кучу всего в основной код. Что нам нужно: уметь поддерживать расширения.
Пока вам все еще приходится полагаться наwebpack.config.js.
webpack 4: использовать babel-loader через конфигурационный файл
Создатьwebpack.config.jsфайл, а затем настройте загрузчик:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Нет необходимости указывать файл записи, если вы этого не хотите.
Затем откройте ./src/index.js и напишите код ES6:
const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;
Окончательная упаковка:
npm run build
Затем перейдите в ./dist/main.js, чтобы увидеть преобразованный код.
webpack 4: использовать babel-loader без конфигурационного файла
Также есть способ использовать загрузчики веб-пакетов.
--module-bindПараметры позволяют указать загрузчики из командной строки. Спасибо Цезарь за указание на это.
Эта опция не уникальна для webpack 4. 3 началось.
Вы можете использовать в package.json вот так:
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
Затем можно приступать к строительству.
Тогда я не большой поклонник этого подхода (не люблю слишком длинные npm-скрипты), но, тем не менее, это весело.
webpack 4: Настройка React в webpack 4
Это легко сделать, если у вас установлен и настроен babel.
Установите Реакт:
npm i react react-dom --save-dev
Добавить кbabel-preset-react:
npm i babel-preset-react --save-dev
Настроить пресет в .babelrc
{
"presets": ["env", "react"]
}
Это оно.
Такие какConner AikenПредполагается, что вы можете настроить babel-loader для загрузки файлов **.jsx**. Это полезно, когда вы используете расширения jsx.
Открытьwebpack.config.jsЗатем настройте так:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Чтобы проверить, хорошо ли он настроен, вы можете./src/App.jsСоздайте компонент React.
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
затем в./src/idnex.jsПредставлен в:
import App from "./App";
восстановить
веб-пакет 4: HTML-плагин
Webpack требует два дополнительных компонента для обработки HTML: html-webpack-plugin и html-loader.
Добавьте эти две зависимости:
npm i html-webpack-plugin html-loader --save-dev
Затем обновите конфигурацию веб-пакета
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
существует./src/index.htmlСоздайте новый HTML-файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
бегать:
npm run build
Проверить./distсодержание. Вы увидите результат прогона.
Нет необходимости включать ваш JavaScript в ваш HTML-файл: он будет внедрен автоматически.
открыть в браузере./dist/index.html: вы можете увидеть работающий компонент React!
Как видите, обработка HTML не изменилась.
webpack 4 по-прежнему является сборщиком модулей, в первую очередь ориентированным на js.
Но есть способ использовать HTML как модуль (HTML как запись).
Извлечь CSS в файл
webpack не умеет извлекать CSS в файлы.
до этого былоextract-text-webpack-pluginработай.
К сожалению, этот плагин плохо работает с webpack 4.
Майкл Синявский говорит:
Экстракт технического обслуживания - Text-WebPack-Plugin - это отличное бремя, но это не первый раз, из-за этой проблемы затрудняет затруднительное положение основных версий.
mini-css-extract-pluginзаключается в решении этих проблем.
Совет: Вам необходимо обновить webpack до версии 4.2.0.0, иначе этот плагин не будет работать!
Установите его:
npm i mini-css-extract-plugin css-loader --save-dev
Затем создайте файл CSS для тестирования.
/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
}
Настройте плагин и загрузчик:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Наконец, введите CSS в файл ввода:
//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";
Конструкция:
npm run build
Проверьте каталог ./dist, и вы должны увидеть результат CSS!
Вывод: Extract-text-webpack-plugin больше не доступен в webpack 4. Пожалуйста, используйте плагин mini-css-extract.
webpack 4: сервер разработки webpack
запустить после изменения кодаnpm run dev? Это не идеальная практика. Уделите несколько минут настройке службы разработки веб-пакетов. После настройкиwebpack dev server Он загрузит ваше приложение в браузере.
Он будет автоматически обновлять страницу браузера всякий раз, когда вы меняете файл.
Установите следующие пакеты для сборки сервера разработки webpack:
npm i webpack-dev-server --save-dev
затем откройтеpackage.jsonНастройте скрипт:
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
Сохранить и закрыть.
Теперь запустите:
npm run start
Вы можете видеть, как сервер разработки webpack загружает ваше приложение в браузере.
Сервер webpack dev отлично подходит для разработки. (И это заставляет React Dev Tools правильно работать в браузере)
веб-пакет 4: ресурсы
Ссылка на этот урок на Github =>webpack-4-quickstart
Я знаю, что есть много списков webpack, но вот мой: коллекция отличных ресурсов webpack4 =>awesome-webpack-4
Здесь мы также должны упомянуть Юхо Вепсяляйнена.SurviveJS webpack 4