Подробное объяснение конфигурации webpack4

предисловие

Друзья группы часто спрашиваютwebpack,react,redux,четноеcreate-react-appНекоторые проблемы в настройке и т. д. мне непонятны.Я многому научился из взаимных обменов между всеми.

Попробуем сегодня поговоритьWebpackЧто ж, цель состоит в том, чтобы помочь каждому углубить свое понимание и облегчить новичкам начало пути.Они могут создавать и настраивать свои собственные леса от 0 до 1 или дополнительно консолидировать упакованные леса.Далее Сунан подробно объяснит .webpackРоль каждого поля конфигурации в (частичноwebpack4новый).

В последние два года интерфейс развивался с высокой скоростью и непрерывно, и пользователи сети часто высмеивают, что они старые и неспособные учиться.

Хотя он и шутит, но косвенно излагает свою беспомощность: из-за давления жизни ему приходится двигаться быстрее.

Потому что никто не остановится для вас, компания не остановится, общество не остановится, коллеги не остановятся... Остановка может означать устранение ——理想很丰满，现实很骨感, так что давайте вместе добиваться прогресса, вместе повышать зарплату, бороться изо всех сил и вперед. .

~~Плевка окончена, поговорим о делах~~.

Простите меня за то, что я не в состоянии контролировать себя, я хочу спросить вас, ребята, вы только вчера выпустили сингл на Double Eleven?

首席填坑官∙苏南的专栏,webpack4配置，公众号：honeyBadger8

Если жизнь так же, как в первый раз, что такое осенний ветер и грустный веер живописи;
Легко измениться, но сердце ветхого человека, но сердце ветхого человека переменчиво;
Лишань сказал, что сейчас половина первого ночи, и Е Юйлиньлин никогда не жаловалась.

Доброе утро, ребята, вот@IT · Союз братьев Пинтоу,ЯДиректор по заполнению · Сунан, поделись с сердцем и будь теплым осадным львом.

Публичный номер Z:honeyBadger8, группа: 912594095

entry

Это не нужно объяснять, просто посмотрите на имя, чтобы знать, это путь в рай/ад入口, все страдания начинаются и заканчиваются здесь.
Несколько простых способов написать:

//方式一：单文件写法
entry: {
	index: './src/pages/route.js',
	//about: './src/pages/about.js',
	//other:()=>{...}
}

//方式二：多文件写法
entry: {
	/*index:[
		'webpack-hot-middleware/client',
		'./src/root.js'
	],*/
	index: ['./src/root.js'],
	vendors : ['react','react-dom','redux','react-router','classnames'],
}
//首席填坑官∙苏南的专栏,公Z好：honeyBadger8

выход - выход

Это ключ верхнего уровня объекта (очень важно), если сказатьentryэто дверь,outputСудья решает, попадете ли вы в рай или в ад;
Инструктировать webpack, как выводить, куда выводить, формат вывода и т. д.;
path: каталог выходного файла,
filename: имя выходного файла, за которым обычно следуетentryКонфигурация соответствует, например:js/[name].jsимя здесь означает [index,vendors],
chunkFilename: блокировка, с ней настроено, без входаentryМодуль поможет автоматически разделить файл, который часто называют загрузкой по требованию, и маршрутизацию.require.ensureсоответствуют друг другу
publicPath: общедоступный путь для вывода файла,
pathinfo: то есть, чтобы сохранить информацию о комментариях во взаимозависимых пакетах, в основном не нужно устанавливать ее активно, по умолчаниюdevelopmentЗначение по умолчанию true в режиме, в то время как вproductionЗначение по умолчанию в режиме равно false,
Это основные и некоторые другие.library,libraryTarget,auxiliaryCommentПодождите, желающие могут узнать об этом сами.

output: {
	path: path.resolve(__dirname, '../assets'),
	filename: 'js/[name].js',
	chunkFilename: 'js/[name].[chunkhash:8].js',
	publicPath: '/_static_/', //最终访问的路径就是：localhost:3000/_static_/js/*.js
	//pathinfo:true,
}

hash

Обычно используются три:

шаблон	описывать
`hash`	Хэш идентификатора модуля, обычно используемый для`filename`: '[имя].[хэш].js'
`chunkhash`	Хэш содержимого блока загружается по запросу, согласно`chunk`Рассчитывается на основе собственного содержимого 'js/[name].[chunkhash:8].js'
`contenthash`	Я этим раньше не пользовался.Прочитал документ.Рассчитывается по содержимому при извлечении файла css.hash , в сочетании с`ExtractTextWebpackPlugin`использование плагина
длина хеша	По умолчанию 20, можно настроить: [hash:8], [chunkhash:16]

mode

Это новое дополнение к webpack 4. До 4 его вообще все использовали.DefinePluginНастройки плагина
Режим:development``，production,none,
development : режим разработки, упакованный код не будет сжат, включена отладка кода,
производство : режим производства и наоборот.


//方法一
webpack --mode development/production

//方法二
……
mode:'development/production'
……

devtool

Определяет, генерировать ли и как генерировать файлы исходной карты, что более удобно для обнаружения проблем в среде разработки.
Конечно, его открытие также повлияет на скорость компиляции, поэтомуПроизводственная средаНе забудьте закрыть;
Общие значения:cheap-eval-source-map,eval-source-map,cheap-module-eval-source-map,inline-cheap-module-source-mapПодождите, подробности можно найти наОфициальный вид;
Я обычно использую:eval-source-mapИх много, и каждый имеет свои особенности, заинтересованные студенты могут попробовать их один за другим.

首席填坑官∙苏南的专栏以上为自定配置中使用频率较高的选项，公众号：honeyBadger8

optimization

optimizationЭто новое дополнение к webpack 4. Оно в основном используется для того, чтобы позволить разработчикам настраивать некоторые конфигурации стратегии для оптимизации конструкции и упаковки в соответствии со своими потребностями.
minimize: true/false, указывает веб-пакету, следует ли включать сжатие минимизации кода,
minimizer: Настройте конфигурацию оптимизации js, которая переопределит конфигурацию по умолчанию в сочетании сUglifyJsPluginиспользование плагина,
removeEmptyChunks: логическое значение, которое обнаруживает и удаляет пустые блоки. Установка значения false отключит эту оптимизацию,
nodeEnv: это не переменная среды в узле. После настройки вы можете использовать process.env.NODE_ENV === 'development' в коде, чтобы судить о некоторой логике. Производственная среда UglifyJsPlugin автоматически удалит бесполезный код.
splitChunks:замененыCommonsChunkPlugin, автоматическое разделение подпакетов, разделение кода, подробная конфигурация по умолчанию:
Конфигурация по умолчанию работает только с асинхронно загружаемыми блоками кода — чанками: 'async', который имеет три значения: all, async, initial

//环境变更也可以直接 在启动中设置
 //webpack --env.NODE_ENV=local --env.production --progress

//splitChunks 默认配置
splitChunks: {
  chunks: 'async',
  minSize: 30000,
  maxSize: 0,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~',
  name: true,
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true
    }
  }
}

runtimeChunk: извлечение кода времени выполнения веб-пакета, для него можно задать: логическое значение, объект
Когда эта конфигурация включена, она переопределит имя, указанное в записи! ! !


optimization: {
	runtimeChunk:true,//方式一
  runtimeChunk: {
    name: entrypoint => `runtimechunk~${entrypoint.name}` //方式二
  }
}

以上为自定配置中使用频率较高的选项，公众号：honeyBadger8

разрешить - настроить, как разрешаются модули

extensions: автоматически анализирует определенные расширения, избавляя вас от необходимости писать суффиксы при импорте компонентов,
alias: очень важная конфигурация, она может настроить некоторые короткие пути,
modules: каталоги, которые вебпак должен искать при разборе модулей,
разноеplugins,unsafeCache,enforceExtension, в принципе бесполезен,


//extensions 后缀可以省略，
import Toast from 'src/components/toast'; 

// alias ,短路径
import Modal from '../../../components/modal' 
//简写
import Modal from 'src/components/modal' 


resolve: {
  extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
  alias: {
    src :path.resolve(__dirname, '../src'),
    components :path.resolve(__dirname, '../src/components'),
    utils :path.resolve(__dirname, '../src/utils'),
  },
  modules: ['node_modules'],
},

module.rules - правила компиляции,

rules: То есть предыдущие загрузчики,
test: регулярное выражение, сопоставление скомпилированных файлов,
exclude: исключить определенные условия, такие как обычно пишутnode_modules, то есть для фильтрации определенных каталогов/файлов,
include: это полная противоположность исключению,
use -loader: должен иметь это, это эквивалентноtestПарсер, соответствующий совпадающему файлу,babel-loader,style-loader,sass-loader,url-loaderи т.д,
use - options: Используется совместно с загрузчиком, который может быть строкой или объектом.Его конфигурация может быть сокращена непосредственно в загрузчике.Есть такжеpresets,pluginsи другие атрибуты;
Давайте посмотрим на пример:


module: {
	rules: [
		{
			test: /\.(js|jsx)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: 'babel-loader',
					options: {
						presets: [
							['env',
							{
								targets: {
								browsers: CSS_BROWSERS,
							},
						}],'react', 'es2015', 'stage-0'
						],
						plugins: [
							'transform-runtime',
							'add-module-exports',
						],
					},
				},
			],
		},
		{
			test: /\.(scss|css)$/,
			use: [
				'style-loader',
				{loader: 'css-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
				{loader: 'postcss-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
				{loader: 'sass-loader',options:{sourceMap: true}}
			]
		},
		{
			test: /\.(png|jpg|jpeg|gif)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: 'url-loader?limit=12&name=images/[name].[hash:8].[ext]',
				},
			],
		},
		{
			test: /\.(woff|woff2|ttf|eot|svg)$/,
			exclude: /node_modules/,
			use: [
				{
					loader: 'file-loader?name=fonts/[name].[hash:8].[ext]',
				},
			],
		},
	],
},//首席填坑官∙苏南的专栏

Часто используемые загрузчики в проектах

компиляция babel-loader, awesome-typescript-loader js*/ts,
Обработка стилей CSS, таких как css-loader, postcss-loader, sass-loader, less-loader, style-loader
File-loader, url-loader, html-loader и другая обработка изображений/svg/html,

плагины - плагины

UglifyJsPlugin
HotModuleReplacementPlugin
NoEmitOnErrorsPlugin
HtmlWebPackPlugin
ExtractTextPlugin
PreloadWebpackPlugin
Подождите, много, много, подробное объяснение плагина будет представлено в следующей главе, пожалуйста, продолжайте обращать внимание.

разница в плагинах/загрузчике

У некоторых новичков могут возникнуть сомнения.loaderПока что? почему до сих порpluginsНу, что еще вы хотите, чтобы он сделал?
loaderРоль состоит в том, чтобы проанализировать файл, например, поместитьES6преобразовать вes5,четноеES3, ведь есть злоIEХорошо сказаноSass,Lessанализируется вCSS,даватьCSSАвтоматически добавлять совместимый префикс, выполнять синтаксический анализ изображения и т. д.;
pluginsШерстяная ткань? что он делает? Это дуть на воду, пить чай, грызть дынные семечки и болтать, конечно же этоloaderПрежде чем закончить проект,loaderнерабочее время этоpluginsНачало страданий, оно должно быть правильнымloaderОптимизация и классификация работы, извлечение сущности (извлечение публичного кода), выполнение обработки сжатия (сжатие js/css/html), вывод указанной директории и т.д..., в любом случае это очень сложно!

webpack-dev-server

Это немного старомодно и обычно полезно для новичков в дороге.
Теперь компания объединена微服务, весь процесс строится и компилируется онлайн вместе с Dockerfile, nodejs, экспрессом и т.д., поэтому большинство проектов не пойдетwebpack-dev-server;
Наша среда разработки должна использоватьexpress + webpack-dev-middleware + webpack-hot-middleware+ '...';
contentBase: Сообщить сервису (серверу разработки) где искать файлы.По умолчанию, если не указано, это будет текущий корневой каталог проекта.
historyApiFallback: возможноboolean,object, сюда будет указывать входной файл ответа по умолчанию, включая 404, см. следующий пример для объекта:
compress: включить сжатие gzip,
publicPath: на самом деле это output.publicPath, когда вы его измените, он будет перезаписанoutputКонфигурация,
stats: Вы можете настроить отображаемые сведения о компиляции,
proxy: это на самом делеhttp-proxy-middleware, который может обрабатывать некоторые прокси-запросы.


//方式一：不配置方式二的内容
 webpack-dev-server --config webpack/webpack.config.dev.js
//指定 端口： --port=8080 
//开启热更新：--hot
//gzip： --compress

//方式二
devServer : 
	contentBase:'./assets',
	host: '0.0.0.0',
	port: 9089,
	publicPath: '/assets/',
	historyApiFallback: {
		index: '/views/index.html'
	},
	/*
	匹配路径，进入不同的入口文件，首席填坑官∙苏南的专栏,公Z好：honeyBadger8
	rewrites: [
			{ from: /^\/$/, to: '/views/landing.html' },
			{ from: /^\/subpage/, to: '/views/subpage.html' },
			{ from: /./, to: '/views/404.html' }
		]
	}
	*/
	compress: true,
	noInfo: true,
	inline: true,
	hot: true,
	stats: {
		colors: true,
		chunks: false
	},
	proxy:{
		'/mockApi': 'https://easy-mock.com/project/5a0aad39eace86040263d' ,//请求可直接写成  /mockApi/api/login...
	}
}

Очки, удаленные webpack4:

module.loaders
NoErrorsPlugin
CommonsChunkPlugin
DefinePlugin
OccurenceOrderPlugin
Добро пожаловать, чтобы добавить ..., это, вероятно, то, что я обычно использую

конец:

Выше приведено краткое изложение конфигурации React Custom scaffolding в работе. Надеюсь, это может быть вам полезно. Изменения в webpack4 довольно большие, функции менее мощные, чем раньше, и это также избавляет разработчиков от многих проблем. , и эффективность значительно повышается, но в то же время это означает, что мы меньше знаем о лежащих в основе вещах,Следующая главаЯ поделюсь с вами некоторыми часто используемыми плагинами / анализами использования, добро пожаловать, чтобы продолжать обращать внимание, не забудьте поставить лайк, конечно, вы можете двигать пальцами, чтобы следовать нижепубликаТем более, спасибо за поддержку!

宝剑锋从磨砺出，梅花香自苦寒来，做有温度的攻城狮!，公众号：honeyBadger8

Автор: Сунан-Главный специалист по заполнению карьеров

Ссылка на сайт:blog.CSDN.net/WeChat_4325…

Связь: 912594095, общественное благо:honeyBadger8

Данная статья является оригинальной и авторские права принадлежат автору. Для коммерческой перепечатки обращайтесь@IT·平头哥联盟Авторизованная, некоммерческая перепечатка, просьба указывать оригинальную ссылку и источник.

Дополнительные инструкции:

Некоторые боссы комментируют, является ли статья оригинальной или нет, и считают необходимым объяснить.Контент, опубликованный выше, представляет собой основу проекта, используемую в настоящее время компанией, Docker, Jenkins, nodejs, экспресс и онлайн-публикацией.
На следующем рисунке показан пример рендеринга на стороне сервера SSR, предоставленный ранее в этом году.Конфигурация основана на webpack3, но конфигурация, плагины и общая структура каркаса такие же, как и сегодня.
Новичок в пути, а это тоже front-end разработка.Хотя это относительно несложно, но я не утруждаю себя копировать чужие вещи, спасибо!
Адрес gitHub: каркас рендеринга на стороне сервера

网易云音乐 react服务端渲染示例