Вынести модуль в глобальный доступ к модулю
Экспортировать сам модуль, и в секции output добавить library: ‘имя модуля для внешнего доступа’
Например, файл messenger
|
|
export default function (message) { alert(`Hey listen me, ${message}`) } |
и конфиг для webpack, который добавит модули в глобальную область видимости window.messenger(‘Don’t drink to much alcohol’)
|
|
entry: { messenger: './messenger', about: './about', }, output: { path: __dirname + '/public', filename: '[name].js', library : '[name]' } |
aggregateTimeout
По-умолчанию webpack ждёт 300 милисекунд после изменения файла, чтобы запустить пересборку. Но, это можно изменить – в конфиге укажите wathcOptions : {aggregateTimeout: 100}
Карты кода
За создание source-maps для модулей отвечает настройка devtool. Пример, devtool : ‘source-map’ – будет создан файл имя-модуля.js.map Есть и другие способы генерации source-map, главное отличие – применимость для “боевой” среды.
Переменные среды
Во время разработки есть необходимость переключаться между средами применения модулей. Например development\production, и во время development опция watch должна быть включена, а во генерации сборки для production соответственно выключена. Для этого можно использовать переменные среды. Укажите в конфиге webpack:
|
|
const NODE_ENV = process.env.NODE_ENV || 'development' module.exports = { ... watch : NODE_ENV == 'development', devtool : NODE_ENV == 'development' ? 'eval' : null } |
Теперь запустите webpack командой NODE_ENV=production webpack убедитесь, что webpack собрал модули и завершил работу. В отличие от запуска без NODE_ENV=production когда webpack продолжит следить за изменениями в файлах.
Переменные окружения в скриптах
При помощи переменных среды и webpack можно так же управлять и скриптами, часто вы используете console.log или debugger ? И хочется чтобы эти строки включались только в development среде.
|
|
const webpack = require('webpack'); module.exports = { ... plugins : [ new webpack.EnvironmentPlugin('NODE_ENV') ] } |
Теперь можно заменить в модулях код, на что-то такое:
|
|
if (process.env.NODE_ENV == 'development') { debugger; } |
Так как, EnvironmentPlugin это обёртка для DefinePlugin, который как раз и служит для передачи произвольных переменных в скрипты. Чтобы использовать его напрямую замените конфиг вебпака на:
|
|
... plugins : [ new webpack.DefinePlugin({ NODE_ENV: JSON.stringify(NODE_ENV)}) ] // было if (process.env.NODE_ENV == 'development') // стало if (NODE_ENV == 'development') |
Краткий итог, EnvironmentPlugin для управления настройками webpack в зависимости от среды. DefinePlugin для передачи произвольных переменных в скрипты.
ES6 и Babel
В Chrome 50 уже практически все нововведния из ES6 поддерживаются без поддержки транспилеров типа Babel. К сожалению, такая ситуация не везде, и для того чтобы писать код на ES6, а работать он мог в любом браузере и работать одинаково нужно использовать Babel. Установите его:
|
|
npm install babel-loader babel-core babel-preset-es2015 --save-dev |
В Webpack есть понятие лоадеров, загрузчиков. Это простые javascript функции которые могут вмешиваться в сборку модулей. Настройка загрузчика Babel в webpack.config.js
|
|
module : { loaders : [ { test : /\.jsx?$/, // проверка каждого файла на соответствение регулярному выражению exclude: /(node_modules|bower_components)/, // исключить дирректории из поиска модулей include : [ path.resove(__dirname, 'app/js') // фильтрация папок для отбора файлов в загрузчик ] loader: 'babel?presets[]=es2015' } ] } |
Resolving, поиск модулей и загрузчиков
Для того чтобы понять как webpack ищет модули надо разобрать две секции конфига webpack, это resolve и resolveLoader. Первая опция служит для общего поиска модулей, например для entry самого конфига, когда вы импортируете модули внутри скриптов.
Так webpack будет искать модуль home в папке node_modules, потом файл home.js
|
|
//webpack.config.js { ... entry : 'home', resolve : { modulesDirectories : ['node_modules'], extensions: ['', '.js'] } } |
А resolveLoader, работает по похожему принципу, но с дополнительной опцией moduleTemplates, которая определяет возможные комбинации для именования папок:
|
|
//webpack.config.js { ... resolveLoader: { modulesDirectories : ['node_modules'], moduleTemplates: ['*-loader', '*'] extensions: ['', '.js'] } } |
UglifyJsPlugin
Для минификации и подготовки сборки для production используется UglifyJsPlugin обёртка. Его конечно надо включать только во время сборки файлов для production.
|
|
if(NODE_ENV == 'production'){ module.exports.plugins.push( new webpack.optimize.UglifyJsPlugin({ compress : { warnings : false, drop_console: true } }) ) } |
Другие опции для плагина, на сайте самого плагина UglifyJS – https://github.com/mishoo/UglifyJS2#usage
Несколько точек входа
Для этого в качестве entry необходимо использовать объект, ключами которого являются название модуля, а значением файл. В output добавить path, если ещ> не сделано, и в качестве filename шаблон.
|
|
output: { path: __dirname + '/public', filename: '[name].js', library : '[name]' } |
Общие участки кода в один файл
Как это работает, у нас есть несколько точек входа, и каждая точка входа использует общие модули, например “домашняя страница” home.js и страница “о нас” about.js обе делают import welcome from ‘./welcome’ Таки общие участки можно выделить в отдельный файл при помощи CommonsChunkPlugin.
Код который необходим на всех страницах сайта. Простое подключение – забирает те модули которые содержатся во всех точках входа.
|
|
plugins : [ ... new webpack.optimize.CommonsChunkPlugin({ name: 'common' }) ] |
Так в файл common.js попадут все общие участки из точек входа.
Настройки CommonsChunkPlugin
minChunks – в каком количестве модулей должен присутствовать общий код чтобы быть вынесенным в отдельный файл. Это значит, что если у вас 10 точек входа, а общий код есть только в 9, то он не будет вынесен в отдельный файл. Но при настройке minChunks : 9 код попадёт в отдельный файл.
chunks – явное указание в каких точках входа искать общие модули, chunks : [‘home’, ‘about’]
В plugins можно указать несколько раз CommonsChunkPlugin, например
|
|
plugins : [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', chunks: ['home', 'about'] }), new webpack.optimize.CommonsChunkPlugin({ name: 'common-shop', chunks: ['cart', 'shop'] }) ] |
Информация о модулях – webpack –display-modules -v
