Webpack start
Запуск из командной строки
npm install webpack -g
Запустим
webpack src/index.js assets/bundle.js
Создаем build.js
var path = require('path');
var webpack = require('webpack');
var config = {
context: path.join(__dirname, 'src'), // исходная директория
entry: './index', // файл для сборки, если несколько - указываем hash (entry name => filename)
output: {
path: path.join(__dirname, 'assets') // выходная директория
}
};
var compiler = webpack(config);
compiler.run(function (err, stats) {
console.log(stats.toJson()); // по завершению, выводим всю статистику
});
Запуск сборки
node build
watch:true
Webpack dev server
В том случае, если нам хочется, чтобы после каждых изменений нашего кода происходила автоматическая сборка или же нам просто нужен локальный сервер, лучше настроить webpack dev server.
npm install webpack-dev-server -g
Добавляем в package.json в раздел scripts
"scripts": {
"start:dev": "webpack-dev-server"
}
Запускаем через командную строку
npm run start:dev
В выводе команды обычно указан порт, на котором будет запущен сервер.
Запускаем браузер и смотрим наш сайт
localhost:9000
Подробнее: https://github.com/webpack/webpack-dev-server
Глобально вызываемый модуль
module.exports = {
output: {
library: 'myClassName',
}
};
Загрузка нескольких файлов
module.exports = {
entry: ["./global.js", "./app.js"],
output: {
filename: "bundle.js"
}
}
Loader'ы
Минификация
webpack -p
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.min.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};
Дополнительные материалы:
Стартовый гайд по Webpack'у
https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.vlijhe21f
Getting started with Webpack2
https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.wizy7qh3p
https://survivejs.com/webpack/developing-with-webpack/getting-started/
О книге Detailed introduction to webpack, Joseph Zimmerman
www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
7 бед - один ответ
https://habrahabr.ru/post/245991/
Скринкаст по Webpack
https://www.youtube.com/playlist?list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn