Начало работы с webpack
Для начала нужно установить webpack глобально: npm install -g webpack
.
Затем инициализировать новый npm проект: npm init
.
Так же необходимо установить webpack локально: npm install --save-dev webpack@1.12.13
.
Далее создаем файл: webpack.config.js в корневом каталоге проекта. Для начала пропишем следующий код:
module.exports = {
entry: './assets/app.js',
output: {
path: __dirname,
filename: './public/js/bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
Свойство entry обозначает точку входа, то есть главный модуль javascript кода. output, соответственно обозначает куда будет помещён скомпилированный код. В объекте resolve размещено свойство extensions, которое содержит массив из допустимых расширений файлов, обрабатываемых webpack.
Установка React и Babel
Возьмем за основу React версии 0.14.7:
npm install --save react@0.14.7 react-dom@0.14.7
Затем установим подходящую версию babel:
npm install --save-dev babel-core@6.5.1 babel-loader@6.2.2 babel-preset-es2015@6.5.0 babel-preset-react@6.5.0 babel-preset-stage-0@6.16.0
Дополнение webpack.config.js
module.exports = {
entry: './assets/app.jsx',
output: {
path: __dirname,
filename: './public/js/bundle.js'
},
resolve: {
root: __dirname, // Set the root in order to make components load without specifying the path
alias: {},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
Во-первых заменим app.js на app.jsx - стандартный формат для React. Во-вторых добавляем объект module, а внем создадим массив объектов loaders. Свойство loader - это соответственно загрузчик babel-loader, query означает параметры загрузчика - то есть через что нужно пропустить код: stage-0 трансформирует самые новые фишки JS, es2015 - компилирует es6 в старый формат JS, ну а react - соответственно отвечает за компиляцию React. Свойство test проверяет формат файла на соответствие .js или .jsx. А exclude не допускает попадание под компилятор файлов пакетов Node и Bower.