Привет, Хабр! Сегодня я расскажу вам о Webpack 4 с разделением кода на отдельные модули, а также об интересных решениях, которые помогут быстро собрать сборку на webpack 4. В конце я предоставлю свою базовую сборку на webpack со всем самым необходимым.
инструменты, которые позже вы сможете расширить.
Эта сборка поможет вам разобраться в этом материале, а также может помочь вам быстрее написать свою реализацию и быстрее решить возможные проблемы.
Основная идеология этой сборки — правильное разделение кода внутри файла конфигурации для удобства использования, читабельности и чистоты webpack.config.js. Необходимые модули и плагины для dev и prod версий (а также для разделения функционала в основном файле) будут находиться в отдельной папке webpack и импортироваться из нее для соединения с основным конфигом.
Почему необходим такой подход?
С постепенным увеличением количества модулей, плагинов и т.п., которые обрастает вашей сборкой вебпака, конфигурационный файл разрастается как на дрожжах.
Со временем этот файл становится трудночитаемым, и изменить его под конкретный проект, если в нем не используются какие-то модули, становится сложнее, а хочется чего-то универсального.
Поэтому необходима четкая организация кода.
Что нам нужно?
Мы будем использовать плагин веб-пакет-слияние .Создаём папку webpack и помещаем все отдельные модули в отдельные файлы.
Например, webpack/pug.js, webpack/scss.js и экспортируйте из них эти функции.
файл pug.js
файл webpack.config.js .module.exports = function() { return { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true, }, }, ], }, }; };
В этом файле мы их подключаем, и с помощью этого плагина подключаем их удобно и быстро.
const merge = require('webpack-merge');
const pug = require('.
/webpack/pug'); const common = merge([ { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js', }, output: { path: PATHS.build, filename: '.
/js/[name].
js',
},
plugins: […],
optimization: { … },
},
pug(),
]);
Теперь, если у нас есть новая задача, требующая нового модуля, плагина, загрузчика, то мы выносим ее в отдельный модуль (файл) и помещаем в папку вебпака, а затем подключаем к основному файлу конфигурации, сохраняя конфиг максимально чистый.
Настройки для производства и разработки
Теперь с помощью тривиального if завершим наше разделение, к которому мы стремились, и настроим наш вебпак для этих двух типов разработки, благодаря чему пользоваться этим инструментом станет совершенно удобно, и в дальнейшем мы сможем гибко и просто настроить его под любой другой проект, либо расширить в текущем.
Для экспорта в ноду (для самого вебпака) в вебпаке 4 мы используем следующую конструкцию: module.exports = function(env, argv) {
if (argv.mode === 'production') {
return merge([
common,
extractCSS(),
favicon(),
]);
}
if (argv.mode === 'development') {
return merge([
common,
devserver(),
sass(),
css(),
sourceMap(),
]);
}
В общий объект мы подключаем то, что используется и в производстве, и в разработке, а в условиях подключаем только те модули, которые необходимы в этих случаях.
Теперь я хотел бы поговорить об основных особенностях вебпака 4 относительно вебпака 3.
- Для быстрой работы веб-пакету 4 не требуется webpack.config.js, теперь ему нужна только точка входа (index.js).
- В новой версии webpack интерфейс командной строки вынесен в отдельный пакет и вам необходимо установить webpack-cli.
- Для запуска вебпака 4 нужно (иначе будет предупреждение) в скриптах указать режим (режим работы) --mode Production или --mode Development, в зависимости от ключа меняется работа вебпака.
Режим разработки предназначен для ускорения сборки.
В продакшн-версии всё направлено на финальную минификацию кода.
- Для создания файлов common.js и common.css CommonsChunkPlugin больше не используется, за это теперь отвечают SplitChunks и используется следующая конструкция:
optimization: { splitChunks: { cacheGroups: { 'common': { minChunks: 2, chunks: 'all', name: 'common', priority: 10, enforce: true, }, }, }, },
В webpack 3 в плагинах это было бы так:new webpack.optimize.CommonsChunkPlugin({ name: 'common ', })
Соответственно, подключаем его частями в HtmlWebpackPlugin (здесь никаких изменений).plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug', }), ],
- Следующий важный момент заключается в том, что для создания sourceMap мы теперь используем следующий подход — создаем файл sourceMap.js в папке веб-пакета и подключаем его, например, в dev-версию (как указано выше):
module.exports = function() { return { devtool: 'eval-sourcemap', }; };
Спасибо за внимание! Теги: #Разработка сайтов #JavaScript #webpack #Сборка систем #webpack 4
-
Бета-Коэффициент
19 Oct, 24 -
Ярлыки, Мотивы И Манипуляции
19 Oct, 24 -
«Вести» Можно Найти На Мобильном Телефоне
19 Oct, 24
