Как правильно сконфигурировать webpack
1. Создаем файл webpack.config.js
в корнефой папке
2. Прописываем ввод (в данном случае 2 файла из корнефой директории)
module.exports = {
entry: {
main: ['./script.js', './script2.js']
}
}
3. Прописываем вывод (файл main.js в катологе public/js)
module.exports = {
entry: {
main: ['./script.js', './script2.js']
},
output: {
filename: './public/js/[name].js'
}
}
Это самый простой пример конфигурации webpack в истории.
Чтобы запустить - просто набираем в командной строке webpack
.
Включаем Babel
Сначала npm install babel-loader --save
. Затем добавляем секцию module в конфигурацию webpack.
module.exports = {
entry: {
main: ['./script.js', './script2.js']
},
output: {
filename: './public/js/[name].js'
},
module: {
loaders: {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
}
}
"test:" - проводит проверку на соответствие файла нужнум параментрам (например расширение .js), чтобы решить нужно ли передать его лоадеру.
Теперь попрубуем настроить webpack для работы c React.js
Все что нужно это заменить расширение .js на .jsx и не забыть знак вопроса. Ну и избавится от абстактных script и script2.
module.exports = {
entry: {
main: ['./src/main.js'] //Новая точка входа
},
output: {
filename: './public/js/[name].js'
},
module: {
loaders: {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
}
}
И ещё стоит создать файл .babelrc в корневом каталоге и добавить в него код включающий все возможности babel.
{
"stage": 0
}