Громко поздоровайтесь с webpack4.0: основное использование webpack (1)

Webpack

Прежде всего, я очень благодарен всем друзьям, которые прочитали эту статью. Я новичок, который любит технологии. Я написал эту статью, потому что я увидел определенный сайт курса "От основ до реального боя, возьмите вас за руку, чтобы освоить новую версию Webpack 4.0.«Сводка также может рассматриваться как мой собственный отчет об обучении. Для меня большая честь, если она вам поможет, но если вы видите мою сводку ошибок, пожалуйста, дайте мне несколько советов.

что такое вебпак?

Webpack — это интерфейсный инструмент для создания пакетов с открытым исходным кодом.

История внешнего кода

Сравнение предыдущего внешнего кода


// html
<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>

// index.js
var header =  document.createElement('div');
header.innerText = '头部';
document.body.append(header);

var slider =  document.createElement('div');
slider.innerText = 'slider';
document.body.append(slider);

var footer =  document.createElement('div');
footer.innerText = '底部';
document.body.append(footer);

По сравнению с тремя модулями нашей страницы, хедер/слайсер/нижний колонтитул

  • На всей странице будет много кода
  • Есть проблема, и она не может быть напрямую определена для конкретного содержания.
  • Все js в одном файле делают файл слишком большим

процесс разделения кода

Итак, мы разделили код на 3 отдельных модуля.

// index.html
<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./header.js"></script>
<script type="text/javascript" src="./slider.js"></script>
<script type="text/javascript" src="./footer.js"></script>
<script type="text/javascript" src="./index.js"></script>
</html>

// header.js
function Header(){
	var header =  document.createElement('div');
	header.innerText = '头部';
	document.body.append(header);
}

// slider.js
function Slider(){
	var slider =  document.createElement('div');
	slider.innerText = 'slider';
	document.body.append(slider);
}

// footer.js
function Footer(){
	var footer =  document.createElement('div');
	footer.innerText = '底部';
	document.body.append(footer);
}

// index.js
new Header();
new Slider();
new Footer();

По сравнению с предыдущим кодом мы можем быстро суммировать преимущества и недостатки.

  • Код более модульный
  • Содержимое файла значительно уменьшено
  • Не удается напрямую найти содержимое модуля
  • Количество файлов сильно увеличилось, а также увеличилось количество запросов на ресурсы

Здравствуйте, я импорт... из...

Все знают, что в es6 мы используем import для импорта модуля, чтобы можно было быстро переписать предыдущий код (метод введения модуля Es Moudule)

// index.js
function Header(){
	var header =  document.createElement('div');
	header.innerText = '头部';
	document.body.append(header);
}
export default Header

// silder.js
function Slider(){
	var slider =  document.createElement('div');
	slider.innerText = 'slider';
	document.body.append(slider);
}
export default Slider

// footer.js
function Footer(){
	var footer =  document.createElement('div');
	footer.innerText = '底部';
	document.body.append(footer);
}
export default Footer

// index.js
import Header from './header.js'
import Slider from './slider.js'
import Footer from './footer.js'

new Header()
new Slider()
new Footer()

привет я модуль.экспорт требуется

// index.js
var Header = require('./header.js')
var Slider = require('./slider.js')
var Footer = require('./footer.js')

new Header()
new Slider()
new Footer()

// header.js
function Header(){
	var header =  document.createElement('div');
	header.innerText = '头部';
	document.body.append(header);
}
module.exports = Header

// slider.js
function Slider(){
	var slider =  document.createElement('div');
	slider.innerText = 'slider';
	document.body.append(slider);
}
module.exports = Slider

// footer.js
function Footer(){
	var footer =  document.createElement('div');
	footer.innerText = '底部';
	document.body.append(footer);
}

module.exports = Footer

Таким образом, в модулях код станет более понятным, но в процессе работы точно будут обнаружены проблемы.В браузере импорт-экспорт и другие синтаксисы не известны.Если был установлен node.js, мы можем напрямую использовать следующие команды, чтобы справиться с этим. , мы подробно объясним ниже.

npx webpack index.js

В этом случае будет сгенерирована упакованная папка dist, а в папке будет main.js. Мы можем запустить его напрямую, добавив ./dist/main.js непосредственно в index.html.

Так что же такое npx?

npx — это команда, выпущенная после npm5.2, насколько я понимаю, это исполнитель пакета. Это поможет вам выполнить двоичные файлы в пакете зависимостей.

Итак, как нам установить этот веб-пакет?

Установить веб-пакет

Установить глобально

npm install -g webpack webpack-cli  // cli可以帮助我们在命令行里正确的运行webpack命令

Таким образом, вы можете использовать команду webpack в любом месте проекта и использовать ее сразу после успешной установки.

webpack -v

Вы можете просмотреть текущий номер версии webpack

В нынешнем виде мысильно старатьсяЭто не рекомендуется.Если мы используем webpack3.* в одном проекте и webpack4.* в другом проекте, то все проекты будут следовать вашей глобальной конфигурации webpack.

Поэтому мы обычно устанавливаем веб-пакет в соответствии с потребностями проекта.Например, веб-пакет моего проекта использует версию 3.0.6, затем в процессе установки добавьте @, чтобы объявить номер версии.

npm install webpack@3.0.6 webpack-cli -D(--save -dev)

Дополнительные очки знаний

npm install moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令
1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

Таким образом, веб-пакет можно использовать в соответствии с конкретным номером версии в проекте.

Итак, как нам проверить текущий номер версии веб-пакета?

npx webpack -v

Затем мы завершили установку этих двух веб-пакетов.

использовать веб-пакет

mkdir webpack-demo
cd webpack-demo
npm init

Сделайте первоначальную настройку webpack. Буду следовать подсказкам, чтобы ввести соответствующую информацию, я не буду объяснять здесь больше.

Затем в проекте будет сгенерирован файл package.json.

{
  "name": "webpack-demo", // 包名
  "version": "1.0.0", // 版本
  "description": "this is my demo", // 描述
  "main": "index.js", // 外部引用 暴露js文件
  "scripts": { // 配置短命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "axin", // 作者
  "license": "ISC" // 项目许可证
}

Мы можем выполнить ряд конфигураций сгенерированных файлов.

{
    "private": true //私有项目
    ...
}

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

npm init -y

Выше приведены два способа создания package.json проекта.

конфигурация веб-пакета

Хотя мы просто используем webpack, нам может показаться, что это всего лишь несколько строк кода, так как же это поможет нам добиться упаковки файлов? На самом деле он использует конфигурацию по умолчанию, официально предоставленную вебпаком, так как же нам использовать нашу собственную конфигурацию? Добавьте webpack.config.js в корневой каталог проекта.

touch webpack.config.js

как мы упоминали вышеnpx webpack index.js, он поможет вам упаковать содержимое файла в index.js, а мы напрямую вводимnpx webpackОн сообщит об ошибке, потому что мы вообще не говорим, какой именно файл будем упаковывать.

const path = require('path'); // 从nodejs中引入path变量

module.exports = {
  entry: './index.js', // 从哪一个文件开始打包
  output: {
    filename: 'bundle.js',  // 打包后生成的文件的名字
    path: path.resolve(__dirname, 'bundle'), // 打包到哪个文件夹下面 __dirname 当前文件夹的一个路径
  }
}

Итак, мы напрямую настраиваем серию webpack.config.js, я написал подробные комментарии, все могут понять с первого взгляда, мы запускаемnpx webpackЕсли это так, вы можете упаковать index.js напрямую. И создайте папку пакета и bundle.js.

Здесь мы используем webpack.config.js в качестве нашего файла конфигурации, что, если мы настроим собственное имя файла конфигурации?

// 使用webpackconfig.js作为打包配置文件
npx webpack --config webpackconfig.js

Организуйте файлы

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

Удалите папку пакета, создайте новую папку src, а затем

index.js
header.js
slider.js
footer.js

Поместите его в папку src в качестве файла ресурсов.

Затем, после изменения, мы настраиваем webpack.config.js для консолидации операции прямо сейчас.

// 先将配置文件改回webpack.config.js
mv webpackconfig.js webpack.config.js

// 修改配置文件名称
npx webpack --config webpack.config.js

// 修改配置内容
const path = require('path'); // 从nodejs中引入path变量

module.exports = {
  entry: './src/index.js', // 从src下面的index.js开始打包
  output: {
    filename: 'main.js',  // 打包后生成的main.js
    path: path.resolve(__dirname, 'dist'), // 打包到dist文件夹
  }
}

// index.html 引入
<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./dist/main.js"></script>
</html>

Пользовательские команды упаковки

Теперь мы упаковываем и используемnpx webpackкоманда, но в некоторых других фреймворках, использующих

npm run build

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

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "this is my demo.",
  "private": true,
  "scripts": {
    "build": "webpack" // 使用npm run build 打包 相当于 npx webpack
  },
  "author": "axin",
  "license": "ISC"
}

Подробное объяснение упакованного выходного содержимого

После упаковки мы введем содержимое, связанное с упаковкой, поэтому давайте посмотрим, что это за содержимое?

请大胆的忽略背景图片

стоимость объяснять
Hash Уникальное хэш-значение, упакованное на этот раз
version Упакованный номер версии, используемый webpack
time Общий расход пакета
built at: Время упаковки
asset имя файла пакета
size Размер упакованного файла
chunks Значение идентификатора пакета, соответствующее файлу
chunk names имя файла
entrypoint main файл записи пакета
Список файлов Список имен упакованных файлов

Могут возникнуть сомнения по поводу следующих двух пунктов 1. Какой режим в предупреждении? Режим на самом деле является режимом сжатия пакетов, который мы настраиваем.Если мы напишем режим напрямую

mode: 'production', // production 压缩 development 不压缩打包代码

Таким образом, при упаковке больше не будет проблем с предупреждением.

2. Как появились имена main в чанках? На самом деле, когда мы настраиваем **entry: './src/index.js'**, это фактически эквивалентно следующей конфигурации

entry: {
    main: './src/index.js'
}

Суммировать

// 1.安装方式
npm install webpack webpack-cli -g
npm install webpack@x.x webpack-cli -D

// 2.打包文件
npx webpack index.js 

// 3.webpack的配置文件
package.json

// 4.打包配置文件 webpack.config.js 以及 声明配置文件名称
npx webpack --config xx

// 5.自定义打包命令
scripts: {}

// 6.打包输出内容详解

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

Категории