WebPack в настоящее время является основным упаковочным инструментом для приложений, разработанных на основе реакции и Redux. Многие приложения, которые я хочу развиваться с угловыми 2 или другими рамками, также используют WebPack.
Когда я впервые увидел конфигурационный файл Webpack, он выглядел очень необычно, и я был очень сбит с толку. Попробовав некоторое время, я думаю, что это потому, что Webpack просто использует специальный синтаксис и вводит новые принципы, поэтому это сбивает пользователей с толку. Это также причины, по которым Webpack незнаком.
Поскольку начало использования Webpack может быть запутанным, я считаю необходимым написать несколько статей, в которых представлены функции и возможности Webpack, чтобы помочь новичкам быстро разобраться. Эта статья первая.
Основной принцип Webpack
1. Все является модулем
Точно так же, как файл js может быть «модулем», другие файлы (такие как css, изображение или html) также могут считаться модулями. Таким образом, вы можете либо требовать ('myJSfile.js'), либо требовать ('myCSSfile.css'). Это означает, что мы можем разделить вещи (бизнесы) на более мелкие управляемые части для повторного использования и т. д.
2. Загрузка по требованию
Традиционные сборщики модулей (module bundlers) в итоге компилируют все модули в один огромный файл bundle.js. Но в реальном приложении файл "bundle.js" может иметь размер от 10 до 15 МБ, из-за чего приложение может продолжать загружаться. Таким образом, Webpack использует множество функций для разделения кода и создания нескольких файлов «пакетов» и асинхронной загрузки частей кода для загрузки по требованию.
Хорошо, давайте перейдем к запутанным частям.
1. Режим разработки и режим производства
Первое, что нужно знать, это то, что Webpack имеет множество функций, некоторые только в «режиме разработки», некоторые только в «режиме производства», а некоторые только в обоих режимах.
通常使用到Webpack如此多特性的项目都会有两个比较大的Webpack配置文件
Чтобы сгенерировать файлы пакетов, вы можете добавить следующую запись скриптов в файл package.json:
"scripts": {
// 运行npm run build 来编译生成生产模式下的bundles
"build": "webpack --config webpack.config.prod.js",
// 运行npm run dev来生成开发模式下的bundles以及启动本地server
"dev": "webpack-dev-server"
}
2. CLI webpack и сервер webpack-dev
Стоит отметить, что Webpack, как инструмент упаковки модулей, предоставляет два интерфейса взаимодействия с пользователем:
-
Инструмент Webpack CLI: интерактивный режим по умолчанию (уже установлен локально с самим Webpack)
-
webpack-dev-server: сервер Node.js (должен быть установлен разработчиками из npm)
Webpack CLI (хорошо для упаковки в производственном режиме)
Таким образом параметры можно получить из командной строки или из конфигурационного файла (по умолчанию webpack.config.js), а полученные параметры передать в Webpack для упаковки
当然你也可以从命令行（CLI）开始学习Webpack，以后你可能主要在生产模式下使用到它。
Применение:
方式1:
// 全局模式安装webpack
npm install webpack --g
// 在终端输入
$ webpack // <--使用webpack.config.js生成bundle
方式 2 :
// 费全局模式安装webpack然后添加到package.json依赖里边
npm install webpack --save
// 添加build命令到package.json的scripts配置项
"scripts": {
"build": "webpack --config webpack.config.prod.js -p",
...
}
// 用法：
"npm run build"
webpack-dev-server (хорошо для компиляции в режиме разработки)
Это веб-сервер, разработанный на основе фреймворка Express.js, который по умолчанию слушает порт 8080. Сервер вызывает Webpack внутренне, преимуществом которого является предоставление дополнительных функций, таких как горячее обновление «Живая перезагрузка» и горячая замена «Горячая замена модуля» (т. е. HMR). Применение:
方式 1:
// 全局安装
npm install webpack-dev-server --save
// 终端输入
$ webpack-dev-server --inline --hot
用法 2:
// 添加到package.json scripts
"scripts": {
"start": "webpack-dev-server --inline --hot",
...
}
// 运行：
$ npm start
// 浏览器预览：
http://localhost:8080
параметры webpack против webpack-dev-сервера
Обратите внимание, что такие параметры, как inline и hot, относятся только к Webpack-dev-server, а другие, например hide-modules, относятся к режиму CLI.
Параметры и элементы конфигурации CLI webpack-dev-server
Также стоит отметить, что вы можете передавать параметры в webpack-dev-server следующими двумя способами:
-
Через объект "devServer" файла webpack.config.js
-
Через опции CLI
// 通过CLI传参
webpack-dev-server --hot --inline
// 通过webpack.config.js传参
devServer: {
inline: true,
hot:true
}
我发现有时devServer配置项（hot: true 和inline: true）不生效，我更偏向使用如下的方式向CLI传递参数
// package.json
{
"scripts": "webpack-dev-server --hot --inline"
}
注意：确定你没有同时传入hot:true和-hot
«горячие» и «встроенные» опции для webpack-dev-server
Опция «встроенная» добавляет «горячую перезагрузку» на страницу входа, а опция «горячая» включает «горячую перезагрузку модуля», которая пытается перезагрузить измененные части компонента (вместо перезагрузки всей страницы). Если переданы оба параметра, webpack-dev-server сначала попробует HRM (т. е. горячую замену) при изменении ресурса и перезагрузит всю страницу входа в случае сбоя.
// 当资源发生改变，以下三种方式都会生成新的bundle，但是又有区别：
// 1. 不会刷新浏览器
$ webpack-dev-server
//2. 刷新浏览器
$ webpack-dev-server --inline
//3. 重新加载改变的部分，HRM失败则刷新页面
$ webpack-dev-server --inline --hot
3. «запись»: случай, когда значение представляет собой строку, массив и объект соответственно.
Элемент конфигурации Enter сообщает Webpack, где находится корневой модуль или начальная точка приложения, а его значение может быть строкой, массивом или объектом. Это может показаться запутанным, потому что разные типы значений служат разным целям.
Как и в большинстве приложений, если ваше приложение имеет только одну запись, вы можете использовать любой тип значения для элемента ввода, и конечный результат будет таким же.
Однако если вы хотите добавить несколько файлов, не зависящих друг от друга, вы можете использовать значения в формате массива.
Например, вы можете ссылаться на файл «googleAnalytics.js» в своем html-файле и можете указать Webpack добавить его в конец bundle.js.
//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>
Примечание. Имя файла берется из имени ключа объекта «entry».
введите: смешанный тип
Вы также можете использовать типы массивов в объекте ввода, например, следующая конфигурация создаст 3 файла: vendor.js (содержит три файла), файлы index.js и profile.js.
4. вывод: элемент "path" и элемент "publicPath"
Элемент вывода сообщает webpack, как и где хранить вывод. Два элемента конфигурации «path» и «publicPath» для вывода могут сбивать с толку.
«Путь» только сообщает Webpack, где хранить результаты, тогда как элемент «publicPath» используется многими плагинами Webpack для обновления значений URL, встроенных в файлы css и html в производственном режиме.
Однако вы также можете использовать опцию «publicPath» Webpack и некоторые плагины для автоматического обновления этих URL-адресов при компиляции выходных файлов в рабочем режиме.
5. Загрузка модулей и загрузка цепочек модулей
Загрузчик модулей — это свободно добавляемый модуль Node, который «загружает» или «импортирует» различные типы файлов и преобразует их в типы, которые могут распознавать браузеры, такие как js, таблица стилей и т. д. Более продвинутые загрузчики модулей могут даже поддерживать импорт модулей с помощью «require» или «import» ES6.
Например, вы можете использовать babel-loader для преобразования файлов, написанных в синтаксисе ES6, в ES5:
module: {
loaders: [{
test: /\.js$/, // 匹配.js文件，如果通过则使用下面的loader
exclude: /node_modules/, // 排除node_modules文件夹
loader: 'babel' // 使用babel（babel-loader的简写）作为loader
}]
Цепной (конвейерный) загрузчик (выполняется справа налево)
Несколько загрузчиков могут быть использованы для одного и того же файла и объединены в цепочку. Сцепленные вызовы выполняются справа налево, а загрузчики разделяются знаком «!».
Например, предположим, что у нас есть файл css с именем «myCssFile.css», и мы хотим встроить его содержимое в окончательный выходной html, используя тег стиля. Для этого мы можем использовать два загрузчика, css-loader и style-loader.
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css' //(short for style-loader!css-loader)
}]
Вот как это работает:
- Webpack ищет css-зависимости во временной части модуля, то есть Webpack проверяет, есть ли в js-файле ссылка на «require('myCssFile.css')», и если находит css-зависимость, Webpack передает css-файл в "css-loader" "чтобы разобраться с
- css-loader загружает все файлы css и собственные зависимости css (например, @import other css) в объекты JSON, а затем Webpack передает результаты обработки в «style-loader».
- Загрузчик стилей принимает значение JSON, добавляет тег стиля и встраивает его в html-файл.
6. Сам загрузчик можно настроить
Сам загрузчик модуля (загрузчик) может быть настроен в соответствии с различными передаваемыми параметрами.
В приведенном ниже примере мы можем настроить загрузчик URL-адресов на использование DataUrl для изображений размером менее 1024 байт и URL-адрес для изображений размером более 1024 байт. Мы можем сделать это, передав параметр «limit» следующими двумя способами. цель
7. файл бабелрк
babal-loader использует элемент конфигурации «presets», чтобы определить, как преобразовать синтаксис ES6 в ES5 и как преобразовать React JSX в файлы js. Мы можем передать конфигурацию с помощью параметра «query» следующим образом:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
}
8. Плагины
Плагины обычно представляют собой модули узлов, которые экспортируют пакеты.
Например, uglifyJSPlugin берет bundle.js, сжимает и запутывает содержимое, чтобы уменьшить размер файла.
Подобный плагин extract-text-webpack-plugin использует css-loader и style-loader для внутреннего сбора всех css в одном месте и, наконец, извлечения результата в отдельный файл «styles.css» и ссылки на style.css в html-документе.
//webpack.config.js
// 获取所有的.css文件，合并它们的内容然后提取css内容到一个独立的”styles.css“里
var ETP = require("extract-text-webpack-plugin");
module: {
loaders: [
{test: /\.css$/, loader:ETP.extract("style-loader","css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css") //Extract to styles.css file
]
}
Примечание: если вы просто хотите встроить css в html с помощью тега стиля, вам не нужно использовать extract-text-webpack-plugin, просто используйте загрузчик css и загрузчик стилей.
9. Загрузчики и плагины
Как вы, возможно, знаете, загрузчики имеют дело с отдельными уровнями файлов и обычно действуют до или во время создания пакета.
Плагины, с другой стороны, имеют дело с уровнем пакета или фрагмента и обычно являются заключительным этапом генерации пакета. Некоторые плагины, такие как commonschunkplugin, еще более прямо изменяют способ создания пакетов.
10. Работа с расширениями файлов
Многие файлы конфигурации Webpack имеют свойство разрешения, а затем значение пустой строки, как показано в приведенном ниже коде. Пустая строка здесь для разрешения некоторых выражений, которые импортируют файлы без расширений файлов, таких как require('./myJSFile') или импортировать myJSFile из './myJSFile' , по умолчанию путь находится как файл js)
{
resolve: {
extensions: ['', '.js', '.jsx']
}
}
это все.
Перепечатано с: https://segmentfault.com/a/1190000005089993?utm_source=tuicool&utm_medium=referral