Изучение webpack и React

Структура проекта

Конфигурация webpack

1. Установка webpack npm install webpack -g # глобальная установка npm install webpack --save-dev # установка в проекте
2. Конфигурация входного файла var path = require('path'); module.exports = { // Входной файл entry: path.resolve(__dirname, 'src/js/app.js'), // Выходной файл output: { // Путь к выходному файлу path: path.resolve(__dirname, 'dist'), // Имя выходного файла filename: 'bundle.js' } }
3. Запуск проекта webpack --config webpack.develop.config.js

Модификация конфигурационного файла с помощью package.json

• Для удобства запуска проекта можно добавить скрипты в package.json "scripts": { "develop": "webpack --config webpack.develop.config.js", "publish": "webpack --config webpack.publish.config.js" }
• Запуск проекта npm run develop

Использование webpack-dev-server для автоматического обновления браузера

1. Установка webpack-dev-server npm install webpack-dev-server --save-dev
2. Изменение конфигурации в package.json "develop": "webpack-dev-server --config webpack.develop.config.js --devtool eval-source-map --progress --colors --inline --hot --content-base ./dist",
3. Запуск проекта с помощью npm npm run develop

• При изменении кода проект будет автоматически перестроен, а браузер обновится

Использование React и react-dom, а также babel-loader

1. Установка React и react-dom npm install react react-dom --save
2. Установка babel-loader и связанных зависимостей npm install babel-loader --save-dev npm install babel-core babel-preset-es2015 babel-preset-react --save-dev
3. Изменение конфигурации webpack.develop module: { rules: [{ test: /.jsx?$/, use: [{ loader: 'babel-loader', options: { presets: ['es2015', 'react'] } }] }] }
4. Запись кода React в app.js // Импорт React import React, { Component } from 'react' // Импорт ReactDOM import ReactDOM from 'react-dom' // Использование ReactDOM для рендера HTML узла ReactDOM.render(
   hello world
   , document.getElementById('app') )
5. Включение bundle.js в index.html в папке dist/js, и добавьте div с id="app"
6. После изменения конфигурационного файла необходимо заново собрать проект вручную npm run develop

Использование css-loader и style-loader

1. Установка npm install css-loader style-loader --save-dev
2. Изменение конфигурационного файла rules: [ { test: /.jsx?$/, use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react'] } } ] }, { test: /.css$/, // Обратите внимание: сначала нужно указать style-loader, а затем css-loader use: ['style-loader', 'css-loader'] } ]
3. Написание CSS-файлов и их импорт в js или jsx-файлы
4. Пересборка npm run develop

Использование sass-loader

1. Установка sass-loader // Использование sass-loader требует установки node-sass npm install node-sass --save npm install sass-loader --save-dev
2. Добавление конфигурационного файла // Обработка ссылок на sass-файлы в js { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } use: ['style-loader', 'css-loader', 'sass-loader'] }
3. Написание SASS-файлов

Использование url-loader

1. Установка url-loader и file-loader npm install url-loader file-loader --save-dev
2. Добавление конфигурационного файла // Обработка изображений { test: /. (png|jpg|jpeg|gif)$/, use: 'url-loader? limit=25000' }, // Обработка iconfont { test: /. (eot|woff|ttf|woff2|svg)$/, use: 'url-loader? limit=2500' }
3. Импорт изображений

Стратегии публикации webpack

Изменение конфигурационного файла

1. Копирование конфигурации из webpack.develop.config.js в webpack.publish.config.js
2. Создание файла .bablerc с указанием следующего содержимого, а также удаление соответствующих настроек из webpack.publish.config.js { "presets": ["es2015", "react"] }
3. Изменение конфигурации url-loader // Обработка изображений { test: /. (png|jpg|jpeg|gif)$/, use: 'url-loader? limit=25000&name=images/[name].[ext]' // При сборке будет создан каталог images для хранения изображений }, // Обработка iconfont { test: /. (eot|woff|ttf|woff2|svg)$/, use: 'url-loader? limit=2500&name=fonts/[name].[ext]' // При сборке будет создан каталог fonts для хранения иконок }

Сепарация сторонних пакетов

1. Изменение файла входа // Файл входа после сепарации сторонних пакетов entry: { app: path.resolve(__dirname, 'src/js/app.js'), // Имена сторонних пакетов, которые нужно сепарировать, указываются в массиве vendors: ['react', 'react-dom'] } },
2. Добавление плагина plugins:[ // Плагин для сепарации сторонних пакетов new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}) ]
3. Включение vendors.js в index.html
4. Запуск npm run publish приведет к созданию файла vendors.js