Следуйте за «тупой девочкой», чтобы изучить веб-пакет (базовый)

JavaScript Webpack
Следуйте за «тупой девочкой», чтобы изучить веб-пакет (базовый)

Дорога Лина к webpack — основы

предисловие

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Всем привет! Я Лин Дуань!

Во-первых, кратко расскажу о причине и следствии названия, чтобы люди, которые едят дыни, не понимали, почему"呆妹".

Это произошло в статье, которую я написал ранее«Резюме чтения «Вопрос души Sanyuan-JS»:

Тогда ... я буду тамLv4Я публикую эту статью не для того, чтобы что-то доказать, я просто хочу сказать:

"你们根本不是喜欢我的文章,就是馋我的身子!"

Дизайнер, с несколькими смайликами собачьей головы.

хорошо.

[собачья голова] [собачья голова] [собачья голова]

Так устройте эту волну"呆妹"Ну кто меня назвал блогером, который держит свои обещания.

(Примечание ⚠️ Следующий контент может вызвать у вас дискомфорт, смотрите с осторожностью)

(Надеюсь, все не будут, как этот блогер, портить атмосферу Наггетс нечистоплотными средствами ради популярности. Такое поведение - лишь улыбка фанатов после апгрейда до четвертого уровня. Надеюсь, что моя статья может понравиться всем. Спасибо~)

(для большего"呆妹"Вы можете обратить внимание на QR-код в конце статьи, а затем ввести"呆妹")

Введение в серию веб-пакетов

Эта серия документирует моюwebpackпроцесс изучения. Если вы, как и я, хотите освоитьwebpack, то я думаю, что это будет вам полезно, потому что учебник основан наwebpackЛичность Сяобая объяснить, делоdemoОн также очень подробный, включая:

  • Основы (эта глава)
  • Метод строительства
  • Статьи по оптимизации
  • статьи о погрузчиках
  • Статьи по настройке

Рекомендуется сначалаmarkПотратьте время, чтобы увидеть.

(На самом деле, эта серия была написана давно и никогда не публиковалась. В то время я также написал длинную серию предисловий, которые меня растрогали. Если хотите почитать ахинею, то можете кликнуть сюда:Адрес GitHub, а теперь официально приступим к обучению)

Все статьиwebpackномер версии^4.41.5, webpack-cliномер версии^3.3.10.

существуетwebpack3середина,webpackсама и ееCLIОба находятся в одном пакете, но в версии 4 они разделены, что также позволяет нам лучше управлять ими.

1. Основное использование

Сначала рассмотрим самый простойwebpackПуть.

Сначала вы должны знать,webpackКак и другие зависимости, включителокальная установкаа такжеУстановить глобальноДа, но здесь я предлагаю вам использовать метод локальной установки,Глобальная установка не рекомендуется.

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

Поэтому в следующих учебниках я буду устанавливать его локальноwebpackспособ объяснения.

(Адрес GitHub кейса в учебнике:LinDaiDai/webpack-basic)

1.1 Инициализировать проект

Сначала мы создаем каталог и инициализируем егоnpm:

$ mkdir webpack-basic && cd webpack-basic
$ npm init -y

(использовать-yинициализацияnpmпоможет нам сгенерировать значение по умолчаниюpackage.jsonконфигурация)

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

Как упоминалось ранее, в статье используетсяwebpackномер версии>4.0Да, из-заwebpackа такжеwebpack-cliуже разделены, нам нужно установить их отдельно (если вы используетеwebpackномер версии меньше4.0вам просто нужно установитьwebpackпросто хорошо)

существуетwebpack-basicВыполните команду в корневом каталоге:

$ npm install webpack webpack-cli --save-dev

Ты найдешьpackage.jsonвнутреннийdevDependenciesв дополнение к тому, что вы только что установилиwebpackа такжеwebpack-cli.

1.3 Создать пакетный файл

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

  • Сначала создайтеsrcпапку и создайтеindex.jsдокумент

  • Создайте один в корневом каталогеdistпапку и создайтеindex.htmlдокумент

После этого структура проекта становится такой:

 webpack-basic
 	|- package.json
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

Добавим к нему кое-что:

// src/index.js
function component() {
    var element = document.createElement('div');

    element.innerHTML = "Hello Webpack";

    return element;
}

document.body.appendChild(component());
<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack起步</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>

index.jsЭто нормально понять, но вы можете заметитьindex.htmlпредставилmain.js, но этоjsМы не видим, где находится файл.

не волнуйся, вотmain.jsЭто то, через что мы проходим дальшеwebpackФайлы производятся уже после упаковки, но здесь мы сначала вводим их заранее.

1.4 Выполнение упаковки веб-пакета

После написания приведенного выше кода мы можем использовать эту команду в корневом каталоге для упаковки:

$ npx webpack

В этот момент вы увидитеdistВ папке есть еще одинmain.jsфайл и открытьindex.html, вы увидите, что на странице отображается: «Hello Webpack».

Возможно, вы будете немного смущены, очевидно, у нас ничего не настроено, как это может быть сгенерированоmain.jsШерстяная ткань.

вот так вwebpack4не любойwebpackВ случае конфигурации,webpackВам будет предоставлен набор настроек по умолчанию.

  • Будуsrc/index.jsкак точка входа (т.entryвариант)
  • Будуdist/main.jsна выходе (т.outputвариант)

Со слов официального сайта:

воплощать в жизньnpx webpack, поместит наш скрипт каквходная точка,Потомвыходдляmain.js.

Доступно в Node 8.2+npxкоманда для запуска бинарного файла webpack в изначально установленном пакете webpack (./node_modules/.bin/webpack)

Во-вторых, используйте файл конфигурации

Из приведенного выше 👆 случая мы знаем, что вwebpack4Если у вас нет файлов конфигурации, он предоставит вам конфигурацию по умолчанию.

Но когдаwebpack3, это не допускается, должен бытьwebpack.config.jsфайл для указания входа и выхода.

Но если вы используетеwebpack4Для разработки, в реальном использовании, вам все еще нуженwebpack.config.jsфайл для выполнения некоторых сложных настроек.

2.1 webpack.config.js

Давайте создадим файл в корневом каталоге проекта с именемwebpack.config.jsфайл и напишите в нем некоторую базовую конфигурацию:

// webpack.config.js
const path = require('path')

module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
   }
}

Теперь давайте повторно используем команду для сборки:

$ npx webpack --config webpack.config.js

Hash: dabab1bac2b940c1462b
Version: webpack 4.0.1
Time: 328ms
Built at: 2018-2-26 22:47:43
    Asset      Size  Chunks             Chunk Names
bundle.js  69.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] ./src/index.js 256 bytes {0} [built]
    + 1 hidden module

WARNING in configuration(配置警告)
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.('mode' 选项还未设置。将 'mode' 选项设置为 'development' 或 'production',来启用环境默认值。)

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

--config webpack.config.js

На самом деле эффект от этой командыУкажите, с каким файлом конфигурации строить, например, здесь мы указываемwebpack.config.jsэтот файл.

Но на самом деле можно и оставить это предложение здесь, т.к.webpackКоманда выберет его использование по умолчанию.

Только если ваш файл конфигурации не вызываетсяwebapck.config.js, но, например, называетсяwebpack.other.config.js, вы должны указать это.

Сейчас,webpackВ соответствии с вашей конфигурацией входsrc/index.js, файл экспортаdist/bundle.js.

Мы также должны переделатьdist/index.htmlвведено:

<script src="bundle.js"></script>

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

2.2 Скрипты NPM

Выше 👆 мы используемnpx webpackТакойCLIспособ запустить локальныйwebpackиз:

$ npx webpack

На самом деле это не очень удобно, мы можем установить ярлык.package.jsonдобавитьnpmсценарий:

{
    "name": "webpack-basic",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
+       "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    },
    "dependencies": {
        "lodash": "^4.17.15"
    }
}

существуетscriptsДобавлена ​​новая конфигурация"build: "webpack".

Теперь вы можете использоватьnpm run buildкоманда, чтобы заменить ту, которую мы использовали раньшеnpxЗаказ.

$ npm run build

Теперь эффект, выполняемый этим командным инструментом, такой же, как и выше 👆.

3. Управляйте ресурсами

Давайте рассмотрим каталог проекта, описанный выше 👆:

 webpack-basic
 	|- package.json
 	|- webpack.config.js
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

Как видите, приведенный выше случай позволяет нам использовать толькоjsфайл для сборки, но в реальной разработке у нас не может быть толькоjsфайл, если мы хотим использоватьcss, картинки, шрифты и эти ресурсы?

не переживай,webpackОдной из лучших особенностей является то, что в дополнение кJavaScript, также черезloader импортировать любой другой тип файла.

3.1 Загрузка CSS

Сначала загрузимcssфайл для ознакомленияloader.

загрузчик стилей и css-загрузчик

для отjsимпортировать модульcssфайл, такой как вы хотитеindex.jsпредставитьcssдокумент:

// index.js
import './style.css'

// 或者用require()的方式
const style = require('./style.css')

Вы должны быть в проекте (т.е.moduleконфигурация), установите и добавьте эти дваloader:

  • style-loader
  • css-loader
$ npm i --save-dev style-loader css-loader

И вwebpack.config.jsнастроить в:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

мы вwebpack.config.jsдобавилmoduleКонфигурация.

Конфигурация здесь означает:

webpackНа основе регулярного выражения определить, какие файлы следует искать, и предоставить их указанномуloader./\.css$/Это регулярное означает соответствие всем именам в каталоге, которые начинаются с.cssВсе файлы, оканчивающиеся на , будут предоставленыstyle-loaderа такжеcss-loader.

($Вы должны знать, что это значит, это означает, что должно закончиться)

Примечание⚠️:

style-loaderположитьcss-loaderСпереди, иначе при упаковке будет сообщено об ошибке.

Это потому чтоloaderПорядок выполнения такой从右往左,从下往上из,webpackдолжно быть всеcssПосле анализа зависимости модуля получается результат расчета, а затем создаетсяstyleЭтикетка. Поэтому должно бытьstyle-loaderпомещатьcss-loaderспереди.

Внедрить css в js

Готов к использованию в нашем проекте прямо сейчасcss, и вы можетеjsввел его в.

Давайте сначалаsrcсоздать папкуstyle.cssфайл и добавьте некоторый контент:

.color_red {
    color: red;
}

а затем изменить наш предыдущийsrc/index.jsфайл датьelementДобавьте имя класса:

import './style.css' // 1. 导入css文件

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('color_red') // 2. 添加类名
    return element;
}

document.body.appendChild(component());

На этом этапе повторно используйте оператор команды для сборки:

$ npm run build

Откройте страницу и обнаружите, что надпись «Hello Webpack» на странице стала красной, что доказывает, чтоcssИмпорт прошел успешно.

Как это реализовано здесь:При запуске модуля теги, содержащие строки CSS, будут вставлены вhtmlдокументheadсередина.

Итак, если мы проверим страницу (т.е. откроем консоль), то вElementsв тебе найдешь,headдобавитstyleярлык, который является вашим определениемcssСодержание.

Каков эффект от использования только css-loader?

Хотя выше 👆 мы вводим для использования на страницеcssпросто нужно использоватьstyle-loaderа такжеcss-loaderэти двоеloader, то каковы их отдельные роли?

Теперь давайте изменимwebpack.config.jsнастроить, удалитьstyle-loader:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
-           "style-loader", 
            "css-loader"
        ],
      },
    ],
  },
};

и положиindex.jsимпортировано тудаstyleРаспечатайте и посмотрите:

// src/index.js
const style = require('./style.css')
console.log('style', style)

Эффект:

Его можно найти,css-loaderЕго роль фактически состоит в том, чтобы распознавать импортcssЭтот модуль, и через определенные правила грамматики для преобразования контента.

Но здесь мы получаем массив, а это не то, что нам нужно, и страница не может его использовать. Поэтому необходимо сотрудничатьstyle-loaderОн может сыграть свою настоящую роль.

Роль загрузчика стилей

style-loaderЕго принцип заключается в том, чтобы создатьstyleтег, который будет содержать некоторые стили. и его нельзя использовать отдельно, потому что он не отвечает за синтаксический анализcssпредыдущие зависимости.

То есть:

  • используется отдельноcss-loaderМы можем только гарантировать, что мы можем цитироватьcssМодуль приходит, но не работает.
  • а такжеstyle-loaderсоздатьstyleметка и импортироватьcssВ этот тег запихиваются стили

Но есть одно замечание, мы в текущем проектеjsпредставил несколькоcssмодуль, он сгенерирует несколькоstyleЭтикетка.

Например, сейчас я создал новый в проектеstyle2.cssфайл и добавьте несколько стилей:

.color_red {
  font-size: 20px;
  color: green;
}

затем вsrc/index.jsимпортировать обаcssдокумент:

import './style.css'
import './style2.css'

(не забудьте поставитьwebpack.config.jsсерединаstyle-loaderповторно добавлено)

перезапустить в это времяnpm run buildнажмите и откройте страницу:

теперь ты найдешь"霖呆呆"Он стал зеленым. (Конечно, я решил простить ее...)

Страница генерирует дваstyleметка, а правила отображения стиля также относятся к лицевой стороне (style2.cssСравниватьstyle.cssпозднее знакомство)

3.2 Загрузка изображений

Мы рассмотрели, как загрузитьcss, так как обрабатываются картинки в проекте?

file-loader

использоватьfile-loaderпозволяет намjsа такжеcssВведите некоторые статические ресурсы в то же самое, вы должны сначала установить и настроить их:

$ npm i --save-dev file-loader

настроитьwebpack.config.js:

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

Как видите, я в оригиналеrulesВ массив добавлена ​​новая конфигурация сcss-loaderОсновы, я думаю, вы быстро поймете здесь.

Внедрение изображений в js/css

Далее давайте посмотрим на эффекты использования изображений в проекте.

Первый яsrcВ каталоге есть картинка:icon.png.

а потом соответственно вindex.jsа такжеstyle.cssимпортировать его в:

// index.js
import './style.css'
import Icon from './icon.png' // 1. 引入图片

function component() {
    var element = document.createElement('div');

    element.innerHTML = '霖呆呆';
    element.classList.add('color_red')

    var img = new Image(200, 200); // 2. 使用图片
    img.src = Icon;
    element.appendChild(img);

    return element;
}

document.body.appendChild(component());
/* style.css */
.color_red {
    color: red;
    background: url('./icon.png');
    height: 300px;
}

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

На этом этапе, если вы будете осторожны, вы можете обнаружить, что после упаковкиdistВ папке будет файл, названный в честь хеш-значения MD5.pngдокумент:

webpack-basic
    |- /dist
        |- 182ba2a0f5c9507387abe2ad84c23e6b.png
        |- bundle.js
        |- index.html

да, когда тыjsилиcssКогда это изображение импортируется в , оно будет обработано и добавлено вoutputПод содержанием.

Интересно, если убратьindex.jsа такжеstyle.cssсредняя параicon.pngцитаты, тоwebpackпосле упаковкиdistВ папке такой картинки не будет.

Другие необязательные параметры для файлового загрузчика

Выше 👆 мы использовали его краткоfile-loader:

rules: [
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: ["file-loader"],
  },
],

фактически,file-loaderЕсть много других параметров.

Например, указать правила именования файлов после упаковки, директорию для сохранения после упаковки и т. д.

Эти правила конфигурации можно поместить вoptionsВ этом объекте:

rules: [
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: "file-loader",
        options: {},
      },
    ],
  },
],

а такжеoptionsВарианты имеют, например.name、context、publicPath、outputPathИ так далее, вы можете проверить:file-loader

Я покажу это здесь,Упакованный образ хранится в папке с изображениями и называется исходным именем образа.:

rules: [
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "images/",
        },
      },
    ],
  },
],

На этом этапе структура каталогов после упаковки станет следующей:

webpack-basic
    |- /dist
        |- /images
            |- icon.png
        |- bundle.js
        |- index.html

nameиз[name]означает использование исходного имени файла,[ext]представляет исходный тип файла,[hash]означает имя по хеш-значению,[path]Представляет ресурс относительноcontextмаршрут из.

(contextПо умолчаниюwebpack.config.js)

3.3 Загрузка шрифтов

Выше👆Мы научились загружать изображения, а как насчет загрузки шрифтов?

По сути, шрифт тоже является ресурсом, поэтому он загружается так же, как и картинка, и тоже используетfile-loader.

Только вwebpackКонфигурация требует, чтобы вы искали суффикс файла шрифта, чтобы выполнить следующую сделку:

webpack.config.js

rules: [
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ["file-loader"],
  },
]

Хорошо, давайте сошлемся на шрифт в проекте, вsrc/создать новыйfontsпапку и добавьте два файла шрифтов, каталог проекта станет следующим:

(два файла шрифтов взяты изОнлайн-шрифты Iconfontскачал)

 webpack-basic
    |- package.json
    |- webpack.config.js
    |- /dist
        |- index.html
    |- /src
        |- fonts
+           |- webfont.woff
+           |- webfont.woff2
        |- icon.png
        |- index.js

существуетcssЦитирую в:

@font-face {
    font-family: 'MyFont';
    src: url('./fonts/webfont.woff2') format('woff2'), url('./fonts/webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

.color_red {
    color: red;
    font-family: 'MyFont';
    background: url('./icon.png');
}

затем измените егоsrc/index.jsслово в:

// src/index.js
function createElement () {
    element.innerHTML = '孔子曰:中午不睡,下午崩溃!孟子曰:孔子说的对!';
}

(Обратите внимание, в случае, если я украл его и использовал напрямуюОнлайн-шрифты Iconfontнаписано, это только для"孔子曰:中午不睡,下午崩溃!孟子曰:孔子说的对!"Эти слова допустимы, но другие слова не подойдут, конечно, вы точно не сможете сделать это в реальном использовании)

Откройте страницу после переупаковки, и вы увидите только что представленный шрифт.

Это то же самое, что и на картинке, если шрифт не используется, он не будет выводиться наoutputвнутри.

3.4 Загрузка данных xml или csv

Помимо вышеперечисленногоcss, изображения и шрифты, доступные ресурсы, которые могут быть загружены, также могут быть данными, такими как:JSON、CSV、TSV、XML.

  • Встроенная поддержкаJSONФайлы, такие какimport Data from './data.json'По умолчанию нормальная работа
  • CSV和TSVфайл нужно использоватьcsv-loader
  • XMLфайл нужно использоватьxml-loader

Поэтому, если вы хотите использовать его, сначала установите его:

$ npm i --save-dev csv-loader xml-loader

затем вwebpack.config.jsСредняя конфигурация:

rules: [
  {
    test: /\.(csv|tsv)$/,
    use: ["csv-loader"],
  },
  {
    test: /\.xml$/,
    use: ["xml-loader"],
  },
],

Теперь вы можете ссылаться прямо в проектеxmlфайл:

import Data from './data.xml'

3.5 Загрузка текстовых данных txt

нагрузка.txtТекстовые данные зависят отraw-loader.

$ npm i --save-dev raw-loader

Затем настройте:

rules: [
  {
    test: /\.(csv|tsv)$/,
    use: ["csv-loader"],
  },
  {
    test: /\.txt$/,
    use: "raw-loader",
  },
],

цитата в это время.txtфайл, чтобы получить его содержимое:

import txt from './assets/file.txt'

export function print() {
    console.log(txt) // 我是一段测试raw-loader的文本内容
}

если вы используетеfile-loaderиметь дело сtxtфайл, это будетtxtФайл сжимается в бандл, и можно получить только путь к файлу:

import txt from './assets/file.txt'

export function print() {
    console.log(txt) // 1474623111aaae6b31c08e1fedda68a3.txt
}

В-четвертых, результат управления

4.1 Несколько входов/выходов

В случае 👆 выше у нас есть только один входsrc/index.jsи выводdist/bundle.js.

фактическиentryа такжеoutputОн поддерживает вас, чтобы иметь несколько входов и выходов.

Я воссоздал проектwebpack-html.А по предыдущей комплектации только вводилwebpack 和 webpack-cli

затем вsrcСоздать подindex.jsа такжеprint.js:

src/print.js:

export default function printMe() {
    console.log("I' m printMe");
}

src/index.js:

import printMe from './print.js';

function component() {
    var element = document.createElement('div');
    element.innerHTML = 'Hello Webpack';

    var btn = document.createElement('button');
    btn.innerHTML = '点击我';
    btn.onclick = printMe;
    element.appendChild(btn);

    return element;
}

document.body.appendChild(component());

Структура проекта на данный момент такова:

webpack-html
    |- package.json
    |- webpack.config.js
    |- /src
        |- index.js
        |- print.js

Затем настройте егоwebpack.config.jsдокумент:

const path = require('path')

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
   output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

На данный момент я настроил два входаindex.jsа такжеprint.js.

Что касается вывода, я использую[name].bundle.js, чтобы после завершения упаковки был сгенерирован файл в следующем формате:

/dist
    |- app.bundle.js
    |- print.bundle.js

существуетdistВ этой папке естьapp.bundle.jsа такжеprint.bundle.js.

Так что вы должны быть в состоянии понять это,[name]соответствуетenteryместо.

Тогда давайтеdistсоздать новую папкуindex.htmlфайл и импортируйте два только что сгенерированныхjsдокумент:

dist/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Output Management</title>
  </head>
  <body>
  <script src="app.bundle.js"></script>
  <script src="print.bundle.js"></script></body>
</html>

Тогда давайте откроем этоhtmlВзгляните на эффект, на странице отображается «Hello Webpack», а при нажатии на кнопку также будетconsole.log.

Докажите, что два только что вывелиjsПроблем с импортом файлов нет.

4.2 Настройка HtmlWebpackPlugin

Во всех вышеперечисленных случаях 👆 мы используем ручное созданиеindex.html, а затем вывестиjsфайл импортировать этоhtml.

На самом деле есть плагин, который позволяет нам избежать этого шага, т.е.html-webpack-plugin

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

Сначала давайте установим его:

$ npm i --save-dev html-webpack-plugin

затем подкорректироватьwebpack.config.js:

const path = require('path')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'Webpack Output Management'
+        })
+    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

Теперь давайте удалим тот, который мы создали вручную ранееindex.html, а затем выполнитьnpm run buildпосмотри.

ОК👌, теперь он будет автоматическиdistсоздается в папкеindex.html, и это также поможет нам вывестиjsимпортируются в:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Output Management</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script>
  <script type="text/javascript" src="print.bundle.js"></script></body>
</html>

Другие элементы конфигурации

существуетHtmlWebpackPluginв, кромеtitle(настроеноindex.htmlПомимо этого элемента конфигурации, существует множество других опций.

Например:

  • имя файла {String } по умолчаниюindex.html, чтобы указать, что вы генерируетеindex.htmlпуть и имя;
  • template { String } по умолчанию '', иногда вы хотите написать свой собственныйindex.htmlфайл, этот атрибут указывает путь к вашему шаблону.
  • favion {String} указывает, что вы генерируетеindex.htmlзначок, конечно, если вы используетеtemplate, это свойство можно использовать и без

Здесь я покажу использованиеfilenameа такжеtemplateПосмотрим, какой будет эффект 😊.

Первый яsrcСоздал новый нижеindex.html, это используется для написания шаблона:

src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body></body>

</html>

затем измените егоwebpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Output Management",
+      filename: "admin.html",
+      template: "src/index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Теперь, после выполнения инструкции по упаковке, сгенерированныйdistКаталог файлов станет следующим:

/dist
+ |- admin.html
    |- app.bundle.js
    |- print.bundle.js
-   |- index.html

4.3 Очистите папку /dist

После каждой сборки мы генерируемdistпапку, но если там остались файлы из истории, то она не будет автоматически очищена.

Теперь рекомендуемой практикой является очистка перед каждой сборкой./distпапка,clean-webpack-pluginДля этого используются плагины.

$ npm i --save-dev clean-webpack-plugin

затем вwebpack.config.jsНастройте его:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
+   new CleanWebpackPlugin({
+       cleanAfterEveryBuildPatterns: ["dist"], // 这个是非必填的
+   }),
    new HtmlWebpackPlugin({
      title: "Webpack Output Management",
      filename: "assets/admin.html",
      template: "src/index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Если следовать методу установки на официальном сайте:

const CleanWebpackPlugin = require('clean-webpack-plugin');
...
new CleanWebpackPlugin(['dist'])

Тогда вы получите ошибку при упаковке:

TypeError: CleanWebpackPlugin is not a constructor

Я выяснил причину этого, если вы установилиclean-webpack-pluginда3.0Выше, вы должны использовать, как яconst { CleanWebpackPlugin } = require('clean-webpack-plugin')ссылаются таким образом.

И настройте папку для очистки с помощьюcleanAfterEveryBuildPatternsопределять.

послесловие

Ты с нетерпением ждешь мира, надеюсь, у тебя нетbug. Эта статья представлена ​​здесь.

"这不是我,这不是我,这不是我"

если тебе тоже нравитсятупая девочкаПросто обратите внимание на публичный аккаунт ЛинаLinDaiDaiИли отсканируйте QR-код ниже👇👇👇 его😊.

Время от времени я буду обновлять некоторый внешний контент знаний и свои собственные оригинальные статьи🎉

Ваша поддержка - главная мотивация для меня продолжать творить 😊.

связанное предложение:

"Самый подробный учебник по bpmn.js во всей сети"

«[Предлагаемое изменение] Прочитав это, вы все еще не понимаете Вавилон, я пришлю вам маску»

«[Рекомендуемые звезды] Подойдите к концу 45 вопросов интервью Promise (1,1 Вт слов, тщательно организованных)»

«[Предложение👍] Давайте продолжим с еще 40 вопросами из этого интервью (1,2 Вт сортировки слов вручную)»

«[Почему не Sanlian] Вопросы о наследовании JS, которые проще, чем наследование семейного бизнеса — инкапсуляция (тест коровьего ножа)»

«[Почему не Sanlian] Ответив на эти 48 вопросов, я полностью понимаю наследование JS (слова 1.7w содержат симпатию — вернитесь к оригиналу)»

«[Хорошо] Полностью понять прошлое и настоящее преобразования типов данных из 206 console.log () (1)»

В этой статье используетсяmdniceнабор текста