Автор оригинала: Ashwin Hariharan.
Это руководство, которое предназначено для того, чтобы помочь вам ослабить ваш рабочий процесс разработки и сэкономить время, используя кучу потрясающих инструментов, которые вы прочитали в Интернете (Rect Hot Loader Ring your Bells?)
Это также предназначено для того, чтобы помочь вам с некоторыми из наиболее часто встречающихся проблем при использовании WebPack – и сэкономьте некоторое время в процессе, прежде чем начать вытащить волосы. В конце концов, вы хотите пойти быстро и порвать другие важные проблемы.
Скорее всего, вы столкнулись с одним или несколькими из следующих вопросов:
- Как у меня есть несколько записей?
- Как мне проводить модули?
- Одна из библиотек/плагинов, которые я использую, зависит от jQuery, как я могу справиться с этим?
- Я продолжаю получать $ не определен или какая-то глупое дерьмо, такое в одном из плагинов jQuery
- Моя патушка берет, как, навсегда, чтобы закончить.
- Я прочитал кучу учебных пособий по тому, как замена модуля для inventjs и думаю, что это действительно круто, но продолжать работать в ошибках при настройке его.
Если вы вступаете в эти трудности, закончите эту статью, прежде чем прибегать к публикации одного из этих вопросов по переполнению стека.
Я предполагаю, что вы уже знаете о преимуществах WebPack и что он используется. Если вы начинаете и не имеете никакой подсказки о том, какой WebPack, я настоятельно рекомендую читать об этом здесь Отказ
Я также предполагаю, что вы строите веб-приложение, а не только некоторую статическую страницу, что означает, что у вас будет веб-сервер, работающий на узле и экспресс. Скорее всего, вы также используете драйвер Nodejs, чтобы поговорить с вашей базой данных – вероятно, Mongodb или Redis.
Так вот что такое типичный webpack.config.js выглядит как:
/**
* @Author Ashwin Hariharan
* @Details Webpack config file for adding new vendors, defining entry points and shimming modules.
*/
var webpack = require('webpack');
var path = require("path");
var lib_dir = __dirname + '/public/libs',
node_dir = __dirname + '/node_modules';
// bower_dir = __dirname + '/bower_components'
var config = {
resolve: {
alias: {
react: node_dir + '/react',
reactDom: lib_dir + '/react-dom',
jquery: lib_dir + '/jquery-1.11.2.min.js',
magnificPopup: lib_dir + '/jquery.magnific-popup.js' //JQuery Plugin
}
},
entry: {
app: ['./public/src/js/app-main'],
vendors: ['react','reactDom','jquery','magnificPopup']
},
output: {
path: path.join(__dirname, "public"),
filename: "dist/js/[name].bundle.js"
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
'window.jQuery': "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity),
],
module: {
noParse: [
new RegExp(lib_dir + '/react.js'),
new RegExp(lib_dir +'/jquery-1.11.2.min.js')
],
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
},
]
}
};
module.exports = config;Этот конфиг предполагает, что вы используете некоторые узловые модули и Dist, версию нескольких библиотек, сохраненных внутри Публичные/Libs папка. Теперь, если вы прочитали другие учебные пособия, вы понимаете, какие конфиги в этом файле делают, однако я все еще буду кратко объяснить, что за то, что в этом файле есть для –
- Псевдонимы/поставщики Вот где вы включаете все ваши библиотеки/узловые модули/другие поставщики и сопоставьте каждому из них на псевдонимы. Затем, если вы используете модуль в любой части вашей прикладной логики, вы можете написать это (в вашем App-Main.js или любой другой файл JS):
var React = require('react');
var ReactDom = require('reactDom');
var $ = require('jquery');
//Your application logicИли если вы предпочитаете AMD Over Commonjs:
define(
[
'react',
'reactDom',
'jquery'
],
function(React, ReactDom, $) {
//Your application logic
}
);Или в ES6 тоже:
import React from 'react'; import ReactDom from 'reactDom'; import $ from 'jquery';
- Определение ваших точек входа
entry: {
}Этот блок в вашем конфиге позволяет WebPack определить, где ваше приложение начинает выполнение, и он создает от него куски. Наличие нескольких точек входа в вашем приложении всегда выгодна. В частности, вы можете добавить все ваши файлы поставщиков – как jQuery и inventjs – в один кусок. Таким образом, ваши файлы поставщиков останутся прежними, даже когда вы измените исходные файлы.
Таким образом, в приведенном выше конфиге есть два точка входа. Один для записи вашего приложения, где начинается ваш JS, и один для ваших поставщиков – каждый из них сопоставлен на имя переменной.
- Ваш выходной каталог и имена файлов Bundle
output: {
path: path.join(__dirname, "public"),
filename: "dist/js/[name].bundle.js"
},Этот блок сообщает WebPack, что назвать ваши файлы после процесса сборки, и где их разместить. В нашем примере у нас есть два записей по имени приложение и Продавцы Поэтому после процесса сборки у вас будет два файла под названием app.bundle.js и Vendors.bundle.js внутри /public/dist/js каталог.
- Плагины
WebPack поставляется с богатой экосистемой плагинов, чтобы удовлетворить конкретные потребности. Я кратко объясню несколько наиболее часто используемых:
- Используйте Commonschunkplugin Чтобы WebPack определить, какой код/модули вы используете больше всего, и поместите его в отдельный пучок, который будет использоваться в любом месте вашего приложения.
- Вы можете при желании использовать Устанавливается вставлять глобал. Есть много плагинов JQuery, которые полагаются на глобальную переменную jQuery, как $, Поэтому с помощью этого плагина WebPack можно получить var (“jQuery”) Каждый раз, когда он встречается с глобальным $ идентификатор. Ditto для любого другого плагина, например, Bootstrap.
В том числе noparse, Вы можете сказать WebPack не разбирать определенные модули. Это полезно, когда у вас есть только дистанция этих модулей/библиотек. Улучшает время сборки.
- Погрузчики
Теперь, если вы пишете JSX в своем React Code, вы можете использовать JSX-Loader или Babel-Loader предварительно подкомпилировать JSX в JavaScript. Так что вы можете запустить NPM установить JSX-погрузчик и включить это на ваш конфиг:
loaders: [
{
test: /\.js$/,
loader: 'jsx-loader'
},
]Однако, если вы пишете свой код в JSX и ES6, вам нужно будет использовать Babel-Loader, Наряду с плагином Babel для реагирования. Так бегите NPM Установить Babel-Core Babel-Loader Babel-Preset-ES2015 Babel-Preset-React А затем добавьте это на ваш конфиг вместо вышеперечисленного.
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
},
include: path.join(__dirname, 'public')
}
]Аналогично, у вас есть погрузчики для компиляции TymerctScript, CoffeeScript и т. Д.
Пример
- Ваш файл веб-сервера:
var http = require("http");
var express = require("express");
var consolidate = require('consolidate');
var handlebars = require('handlebars');
var bodyParser = require('body-parser');
var routes = require('./routes');
var app = express();
//Set the folder-name from where you serve the html page.
app.set('views', 'views');
//For using handlebars as the template engine.
app.set('view engine', 'html');
app.engine('html', consolidate.handlebars);
//Set the folder from where you serve all static files like images, css, javascripts, libraries etc
app.use(express.static('./public'));
app.use(bodyParser.urlencoded({ extended: true }));
var portNumber = 8000;
http.createServer(app).listen(portNumber, function(){
console.log('Server listening at port '+ portNumber);
app.get('/', function(req, res){
console.log('request to / received');
res.render('index.html');
});
});- App-Main.js Откуда начинается наша логика на передней панели:
define(
[
'react',
'reactDom',
'./components/home-page'
],
function(React, ReactDom, HomePage){
console.log('Loaded the Home Page');
ReactDom.render(- Home-Page.js Наш родительский компонент реагирования, который может содержать что-то вроде этого:
define(['react', 'jquery', 'magnificPopup'], function(React, $) {
var HomePage = React.createClass({
getInitialState: function() {
return {
userName: 'ashwin'
}
},
componentDidMount: function() {
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
},
render: function() {
return (
{this.state.userName}
Open popup
);
}
});
return HomePage;
});
Открывая свой терминал, идя в корневую папку вашего проекта и запустить WebPack создаст два файла: Vendors.bundle.js и app.bundle.js. Включите эти два файла в вашем index.html и ударил http://localhost: 8000 в вашем браузере. Это сделает компонент с вашим именем пользователя, отображаемым на веб-странице.
Теперь, когда вы работаете больше на WebPack, вы расстроены постоянно, чтобы построить свои файлы вручную, чтобы увидеть изменения, отраженные на вашем браузере. Разве это не будет здорово, если бы был способ автоматизировать процесс сборки каждый раз, когда вы делаете изменение в файл? Так что если вы устали от печатать команду WebPack И ударайте кнопки «Обновить» на своем браузере каждый раз, когда вы изменяете имя класса, прочитайте …
Автоматизация сборки с сервером WebPack Dev и React Hot Loader
Мы будем использовать этот удивительный модуль под названием WebPack Dev Server Отказ Это экспресс-сервер, который работает на порту 8080 и испускает информацию о состоянии компиляции клиенту через соединение сокета. Мы также будем использовать Реагировать горячий погрузчик который является плагином для WebPack, который обеспечивает мгновенное живое обновление без потери состояния во время редактирования компонентов реагирования.
- Шаг 1 : Так что иди беги NPM Установите WebPack-Dev-Server – Save-dev а потом NPM установить React-Hot-Loader – Save-dev
Затем вам нужно немного настроить ваш веб-папак, чтобы использовать этот плагин. В ваших погрузчиках добавьте это перед любым другим погрузчиком:
{
test: /\.jsx?$/,
loaders: ['react-hot'],
include: path.join(__dirname, 'public')
}Это говорит WebPack использовать React Hot Loader для ваших компонентов. Убедитесь, что отреагируйте горячий погрузчик, прежде чем Babel в массиве погрузчиков. Также убедитесь, что у вас есть включают в себя: path.join (__ dirname, «публичный») Чтобы избежать обработки Node_Modules, или вы можете получить ошибку:
Uncaught TypeError: не может прочитать свойство ‘Node_env’ undefined
- Шаг 2 : Изменения в вашем index.html.
Если ваш index.html имеет что-то подобное:
Измените это, чтобы указать на ваш WebPack-Dev-Server Proxy:
- Шаг 3: Беги webpack-dev-server –hot –inline ,
Подождите, пока заканчивается пакет, затем нажмите http://localhost: 8000 (ваш порт экспресс-сервера) в вашем браузере.
Если вы столкнулись с любыми ошибками при настройке React Hot Loader, вы найдете это Руководство по устранению неполадок и этот удивительный ответ на стек переполнения на Управление зависимостью плагинов JQuery с WebPack очень полезно. Кроме того, вы можете взглянуть на настройку WebPack для моих проектов здесь и здесь Отказ
Это предназначено только для развития. В то время как в производстве вам нужно министерзировать все ваши файлы. Просто работает WebPack -P Будет ли миниин/UGLIFY/CONCATENATE все ваши файлы.
Разве это не было бы потрясающе, если бы был способ просмотреть все ваши файловые зависимости в красивой древесной визуализации? Есть веб-приложение, которое делает это.
В вашем терминале запустите WebPack – профиль – json> stats.j сын. Это генерирует файл JSON под названием stats.json. Идти на http://webpack.github.io/analy SE/и загрузите файл, и вы увидите все зависимости в дереве, как структуру.