Основная идея

• Entry: Entry, первый шаг выполнения построения Webpack начнется с Entry, который можно абстрагировать во входные данные.
• Модуль: модуль, все является модулем в Webpack, а модуль соответствует файлу. Webpack будет рекурсивно находить все зависимые модули, начиная с настроенного Entry.
• Чанк: блок кода, фрагмент состоит из нескольких модулей для слияния и сегментации кода.
• Загрузчик: преобразователь модулей, который используется для преобразования исходного содержимого модуля в новое содержимое по мере необходимости.
• Плагин: Плагин расширения, вводит логику расширения в определенное время в процессе сборки wp.
• Вывод: выведите результат после того, как Webpack пройдет серию обработок и получит окончательный желаемый код.

Entry

Entry, первый шаг выполнения сборки Webpack начнется с Entry, который можно абстрагировать во входные данные.

Конфигурация файла с одной страницей и одной записью

module.exports = {
	entry: './path/to/my/entry/file.js'
}

Конфигурация многостраничного файла с несколькими записями

module.exports = {
	entry: {
		one: './path/one.js', 
		two: './path/two.js'
	},
	plugins:[
		new HtmlWebpackPlugin({
			title:'第一个页面',
			template: './pages/one.html', // 指定第一个页面的模板
			filename: './pages/one.html', // 指定第一个页面打包完成后的文件名
			chunks: ['one','two'] // 指定第一个页面要打包进入的js
		}),	
		new HtmlWebpackPlugin({
			title:'第二个页面',
			template: './pages/two.html', // 指定第二个页面的模板
			filename: './pages/two.html', // 指定第二个页面打包完成后的文件名
			chunks: ['one','two'] // 指定第二个页面要打包进入的js
		}),	
	]
}

Webpack создает одностраничные и многостраничные экземпляры

Преимущества и недостатки одностраничного и многостраничного размещения подробно описаны в Интернете Конкретное применение одностраничного или многостраничного следует выбирать в соответствии с потребностями проекта.

Как правило, конфигурация одной страницы имеет соответствующую структуру, такую ​​как vue-cli, которая интегрирует wp, что сокращает утомительную работу по настройке веб-пакета.

Многостраничные приложения теперь не имеют скаффолдинга и могут быть настроены. Конкретные примеры можно найти в этой статье:

nuggets.capable/post/684490…

Несколько страниц хотят добиться совместного использования компонентов и инкапсуляции на одной странице., вы можете обратиться к этому для настройки, вам нужно импортироватьejsШаблон, см. это:

nuggets.capable/post/684490…

Module

模块,在Webpack里一切皆模块，一个模块对应一个文件。 Webpack будет рекурсивно находить все зависимые модули, начиная с настроенного Entry. ####配置Loader

• test: Сопоставляет файлы для преобразования, используя регулярные выражения для сопоставления.

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

• exclude: исключить преобразование файла для ускорения компиляции и поиска.

• использование: добавление параметров после использования, таких как кэширование и сжатие, также может ускорить компиляцию.

    module:{
    	rules: [
    		{
    			//解析js文件
    			test: /\.js$/,
    			// 用babel-loader转换js文件
    			 // ?cacheDirectory表示传给babel-loader的参数，用于缓存babel的编译结果，加快重新编译的速度
    			use: ['babel-loader?cacheDirectory']
    			 // 只命中src目录里的Js文件，加快webpack的编译速度
    			 include: path.resolve(_dirname,'src')
    		},
    		{
    			//解析Scss文件
    			test: /\.scss$/,
    			// 使用一组loader去处理scss文件
    			// 处理顺序为从后到前，即先交给scss-loader处理，再将结果交给css-loader,最后交给style-loader
    			use: ['style-loader','css-loader','sass-loader'],
    			// 排除node_modules目录下的文件
    			exclude: path.resolve(__dirname,'node_modules')
    		},
    		{
    			// 对非文本文件采用file-loader加载
    			test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
    			use: ['file-loader']
    		}
    	]
    }
  

В приведенном выше примере тест, включение, исключение проходят только в строке или обычном, на самом деле они также поддерживают типы массивов

{
	test:[
		/\.jsx?$/,
		/\.tsx?$/
	],
	include:[
		path.resolve(__dirname,'src'),
		path.resolve(__dirname,'tests')
	],
	exclude:[
		path.resolve(__dirname, 'node_modiles'),
		path.resolve(__dirname, 'bower_modules')
	]
}

noParse

Элемент конфигурации noPaese позволяет Webpack игнорировать рекурсивный синтаксический анализ и обработку некоторых файлов, которые не являются модульными, что повышает производительность сборки. Причина в том, что некоторые библиотеки, такие как jQuery и ChartJS, огромны и не принимают модульных стандартов, поэтому Webpack отнимает много времени и не имеет смысла анализировать эти файлы.

noParse: /jquery|chartjs/

Использование функций, поддерживаемых начиная с Webpack 3.0.0

noParse: (content) => {
	//content代表一个模块的文件路径
	//返回true或false
	return /jquery|chartjs/.test(content)
}

parse

Поскольку Webpack основан на модульных файлах js, он имеет встроенные функции синтаксического анализа для модульных js и поддерживает AMD, CommonJS, SystemJS, ES6. Атрибут parse позволяет более детально настроить, какие грамматики модулей анализируются, а какие нет.

Отличие от элемента конфигурации noParse заключается в том, что .parser может быть точным на уровне грамматики, а noParse может только контролировать, какие файлы не анализируются.

Использование синтаксического анализа выглядит следующим образом:

modele:{
	rules:[
		test: /\.js$/,
		use: ['babel-loader'],
		parser: {
			amd: false, //禁用AMD
			commonjs: false, // 禁用CommonJS
			system: false, // 禁用 SystemJS
			harmony: false, // 禁用ES6 import/export
			requireInclude: false, // 禁用requireInclude
			requireEnsure: false, // 禁用requireEnsure
			requireContext: false, // 禁用requireContext
			browserify: false,  // 禁用browserify
			requireJs: false // 禁用requirejs
		}
	]
}

Loader

Преобразователь модулей используется для преобразования исходного содержимого модуля в новое содержимое по мере необходимости.

• Порядок выполнения загрузчиков сзади вперед.

• Каждый загрузчик может передавать параметры через строку запроса URL, напримерcss-loader?minimizeсерединаminimizeСкажите css-loader включить сжатие css.

• Способ передачи атрибутов загрузчику может быть реализован не только через строку запроса, но и через объект.

    user:[
    	'style-loader',{
    		loader:'css-loader',
    		options:{
    			minimize:true
    		}
    	}
    ]
  

Когда загрузчику нужно передать много параметров, мы также можем описать его через объект, например, в приведенной выше конфигурации babel-loader есть следующий код

use:[
	{
		loader：'babel-loader',
		options:{
			cacheDirectory:true
		},
		// enforce: 'post'的含义是将该loader的执行顺序放到最后
		// enforce: 'pre'的含义是将loader的执行顺序放到最前面
	}
]

Plugin

Плагины расширения внедряют логику расширения в определенное время в процессе сборки Webpack.

Конфигурация плагина очень проста.Элемент конфигурации плагинов принимает массив.Каждый элемент в массиве является экземпляром плагина, который будет использоваться.Параметры, требуемые плагином, передаются через конструктор.

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
module.exports = {
	plugins: [
		// 所有页面都会用到的公共代码被提取到common代码块中
		new CommonsChunkPlugin({
			name: 'common',
			chunks: ['a','b']
		})
	]
}

Извлеките файл css отдельно

	const ExtractTextPluginn = require('extract-text-webpack-plugin')

	module:{
		reules:[
			{
				textL /\.css$/,
				loaders: ExtractTextPlugin.extract({
					use:[
						'css-loader'
					]
				}),
			}
		]
	},
	plugins: [
		new ExtractTextPlugin({
			//从.js文件中提取出来的.css文件的名称
			filename: `[name]_[contenthash:8].css`
		})	
	]

Resolve

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

alias

Элемент конфигурации resolve.alias сопоставляет исходный путь импорта с новым путем импорта через псевдоним. Например, используйте следующую конфигурацию:

resolve:{
	alias:{
		components: './src/components'
	}
}

При импорте через **кнопку импорта из 'components/button'**

фактически заменяется эквивалентным псевдонимомimport Button from './src/components/button'

extensions

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

resolve.extensions используется для настройки списка суффиксов, используемых в процессе попытки, по умолчанию:

extensionsL ['.js','.json']

То есть при столкновении от оператора импорта, такого как требуется («./ Данные»), WebPack сначала будет искать файл ./data.js. Если файл не существует, он будет искать ./data. JSON File. Если все еще сообщите об ошибке, если не найдено.

escriptionFiles

Если Resolve.enForceextence настраивается как True, все операторы импорта должны иметь суффикс файла. Например, импорт './foo' может работать нормально перед открытием, но должен быть записан как ** import './foo.js' после открытия **

Devtool

devltool настраивает, как Webpack генерирует исходные карты. Значение по умолчанию — false, то есть исходные карты не генерируются. Если вы хотите сгенерировать исходную карту для созданного кода для облегчения отладки, вы можете настроить его следующим образом:

module.export = {
	devtool: 'source-map'
}

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

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

В режиме Source-Map исходная карта будет открыта.Если создается исходная карта насилия кода, опубликованного в Интернете, это эквивалентно утечке исходного кода.

Для решения двух вышеуказанных задач можно сделать следующее.

• В среде разработки для devtool установлено значение cheap-module-eval-source-map, потому что генерация этой исходной карты является самой быстрой и может ускорить построение. Поскольку сжатие кода не выполняется в среде разработки, даже если в исходной карте нет информации о столбцах, это не повлияет на отладку при отключении питания.

• В производственной среде установите для devtool значение hidden-source-map, что означает создание наиболее подробной исходной карты, но не раскрывает исходную карту. Поскольку сжатие кода будет выполняться в производственной среде, файл js состоит только из одной строки, поэтому требуется информация о столбцах.

В производственной среде обычно нетSource MapЗагрузите его на http-сервер для получения пользователями, но загрузите его в систему сбора ошибок JavaScript и запустите стек ошибок в соответствии с исходной картой и собранным кодом JavaScript в системе сбора ошибок, чтобы вычислить местоположение исходного кода, где ошибка находится.

Не используйте исходную карту во встроенном режиме в рабочей среде, так как это сделает файл JavaSctipt очень большим и приведет к утечке исходного кода.

Externals

Внешний используется, чтобы сообщить Webpack, какие модули используются в коде, который не нужно упаковывать, то есть эти шаблоны предоставляются внешней средой, и Webpack может игнорировать их при упаковке.

Через внешние параметры вы можете сообщить Webpack, какие глобальные переменные были созданы в среде выполнения js, вместо того, чтобы упаковывать эти глобальные переменные в код, а использовать их напрямую.

moudle.export = {
	externals: {
		//将导入语句里的jquery替换成运行环境里的全局变量jQuery
		jquery: 'jQuery'
	}
}

Оптимизация веб-пакета

• Оптимизация опыта разработки

    优化开发体验的目的是提升开发效率，减少每次构建的耗时
    1. 优化构建速度
    2. 优化使用体验，通过自动化手段完成一些重复的工资哦，让我们专注于解决问题本身。
  

• Оптимизация качества вывода

    呈现用户体验更好的网页，减少首屏加载时间，提升性能流畅度。
  
    1. 缩小文件的搜索范围
    2. 优化Loader的配置,通过include去命中 只有哪些文件去处理，通过exclude去去除哪些文件不需要处理，比如node_module
    3. 优化resolve.modules配置
    resolve.modules用于配置Webpack去哪些目录下寻找第三方模块。
    
    resolve.modelus的默认值是['node_modules']含义是先去当前目录的./node_modules目录下去找我们想找的模块，如果没找到，就去上一级目录../node_modules中找，再没有就去../../node_modules中找，以此类推
    
    当安装的第三方模块都放在项目根目录的./node_modules目录下时，就没有必要按照默认的方式去一层层的寻找，可以指明存放第三方模块的绝对路径，以减少寻找，配置如下:
    
    	module.exports = {
    		resolve: {
    			// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    			// 其中,__dirname表示当前工作目录，也就是项目根目录
    			modules: [path.resolve(__dirname,'node_modules')]
    		}
    	}
    4.优化resolve.alias配置,跳过递归解析操作
    
    5.优化resolve.extensions配置减少后缀，后缀要尽可能少，提升速度
    
    6.优化noParse配置
  

Использование DllPlugin

Динамическую библиотеку, содержащую большое количество повторно используемых модулей, нужно скомпилировать только один раз, и модули, включенные в динамическую библиотеку, не будут перекомпилироваться в последующем процессе построения, а будет непосредственно использоваться код в динамической библиотеке. Поскольку большинство библиотек динамической компоновки содержат общие сторонние модули, такие как react и react-dom, до тех пор, пока версии этих модулей не будут обновлены, библиотеки динамической компоновки не нужно перекомпилировать.

Webpack имеет встроенную поддержку библиотек динамической компоновки, доступ к которым необходимо получить с помощью следующих двух встроенных плагинов.

• DllPlugin: используется для упаковки отдельных файлов библиотеки ссылок Dintai.
• Плагин DllReferencePlugin: используется для добавления упакованного файла библиотеки динамической компоновки плагина DllPlugin в основной файл конфигурации.

HappyPack

Webpack, работающий на Node.js, является однопоточной моделью.Happy Pack делит задачи на несколько подпроцессов для одновременного выполнения.После обработки подпроцессов результаты отправляются в основной процесс.Поскольку js является однопоточным Модель желательно для воспроизведения функции многоядерного процессора, это можно реализовать только через многопроцессорность, но не через многопоточность.

Во всем процессе создания Webpack наиболее трудоемким процессом может быть преобразование файлов загрузчиком, потому что объем файловых данных, которые необходимо преобразовать, огромен, и эти операции преобразования могут быть обработаны только одна за другой. Основной принцип HappyPack состоит в том, чтобы разбить эту часть задачи на несколько процессов для параллельной обработки, тем самым сокращая общее количество строительных операций.

ParallelUglifyPlugin

Первоначально использовалось бы Uglifyjs для сжатия одного за другим, а затем вывода

Paralleuglifyplugin откроет несколько подпотоков и распределит работу по сжатию нескольких файлов между несколькими подпроцессами.Каждый подпроцесс фактически сжимает код с помощью uglify, но становится параллельным выполнением, поэтому Paralleuglifyplugin может выполнять сжатие нескольких файлов быстрее. сжатие файлов

мониторинг файлов

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

Есть два способа включить Webpack для включения режима мониторинга.

• Установите watch:true в файле конфигурации webpack.config.js.
• При выполнении команды для запуска веб-пакета с параметром --watch завершенная командаwebpack--watch

Оптимизация производительности файлов

игнорировать node_modules

module.export = {
	watchOptions:{
		ignored: /node_modules/
	}
}

Автообновление браузера

Включить горячую замену модуля

## Различать окружающую среду Различайте среду разработки и производственную среду, указывайте исходную карту различных используемых режимов отладки, следует ли включать сжатие, извлекать ли общедоступный код и т. д.

Извлечь общедоступный код

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

Ресурсы, необходимые для загрузки страницы, слишком велики, что приведет к медленной загрузке первой страницы страницы и повлияет на взаимодействие с пользователем.

webpackchunkplugin

Разделение кода, загрузка по требованию.

Как загрузить по запросу

1. При оптимизации загрузки по требованию для одностраничных приложений обычно используются следующие принципы.

2. Разделите весь сайт на небольшие функции, а затем разделите их на категории по степени актуальности каждой функции.

3. Объедините каждый класс в фрагмент и загрузите соответствующий фрагмент по запросу.

4. Не загружайте функцию, соответствующую экрану, который пользователь должен увидеть при первом открытии веб-сайта, и поместите ее в фрагмент, где находится запись выполнения, чтобы сократить время загрузки страницы, которое может воспринять пользователь.