Самое подробное введение в webpack4.x

предисловие

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

1. Что такое веб-пакет и зачем его использовать?

1.1 Что такое веб-пакет?

Проще говоря, этосборщик модулей.

1.2 Зачем использовать?

Если html-файл может ссылаться на более чем дюжину js-файлов в предыдущей разработке, и порядок не должен быть беспорядочным, потому что у них есть зависимости, и в то же время для новых синтаксисов, таких как ES6+, предварительная обработка CSS, таких как less и sass не могут быть хорошо решены..., в настоящее время необходим инструмент для решения этих вопросов.

Webpack был создан для решения этих проблем.Он обрабатывает ваш проект как единое целое, через входной основной файл (например, index.js), из этого файла находит все зависимые файлы вашего проекта и обрабатывает их, и, наконец, упаковывает в один (или несколько) распознаваемых браузером файлов JavaScript.

Во-вторых, простой пример упаковки

2.1 Подготовка

Сначала создайте пустую папку для создания проекта, войдите в папку в терминале, следующим образом я создал папку с именем webpack-project на рабочем столе, после использования терминала для входа в папку (если вы не знакомы с командной строкой, Вы можете обратиться к моему блогу:Командной строки не будет? Смотри сюда),использоватьnpm initкоманда для создания файла package.json.

npm init

После ввода этой команды терминал запросит у вас ряд информации, такую как название проекта, описание проекта, автора и т. д., но если вы не планируете публиковать этот модуль, просто нажмите Enter до упора. (Вы также можете использоватьnpm init -yЭта команда генерирует файл package.json по одному, чтобы терминал не задавал вам вопросов).

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

Если вы хотите сделать все за один шаг, поместите всеwebpack,webpack-cliи местные проектыwebpack,webpack-cliВсе устанавливается первым, т.к. некоторые модули будут использоваться позже. УстановитьwebapckСрокиwebpack-cliТакже установлен, потому чтоwebpack4.xПосле версии модуль webpack разделяет некоторые функции наwebpack-cliмодуль, поэтому оба должны быть установлены, метод установки следующий:

npm install webpack webpack-cli --global    //这是安装全局webpack及webpack-cli模块
npm install webpack webpack-cli --save-dev  //这是安装本地项目模块

tips:

Приведенную выше команду можно сократить,installможно сократить какi,--globalможно сократить как-g,--save-devможно сократить как-D(Эта команда используется для добавления конфигурации в список конфигураций среды разработки в package.json, о чем будет сказано позже),--saveможно сократить как-S, в то же время мы можем использовать cnpm в Китае, и метод настройки может бытьиди сюдаПроверьте это, так что установка будет относительно быстрой. следующее:

cnpm i webpack -g               //这是安装全局webpack命令
cnpm i webpack webpack-cli -D   //这是安装本地项目模块

2.3 Новый файл

существуетwebpack-projectСоздайте две новые папки в папке, папку src и папку dist, а затем создайте еще три файла:

index.html--Поместить в папку dist;
hello.js-- Поместите его в папку src;
index.js-- Поместите его в папку src;

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Project</title>
</head>
<body>
    <div id='root'></div>
    <script src="bundle.js"></script>   <!--这是打包之后的js文件，我们暂时命名为bundle.js-->
</body>
</html>

мы вhello.jsЭкспорт модуля в:

// hello.js
module.exports = function() {
    let hello = document.createElement('div');
    hello.innerHTML = "Long time no see!";
    return hello;
  };

затем вindex.jsимпортировать этот модуль (hello.js):

//index.js 
const hello = require('./hello.js');
document.querySelector("#root").appendChild(hello());

Описанная выше операция эквивалентна нашейhello.jsМодуль выключенindex.jsМодуль, то когда мы упаковываем его, нам нужно только поставитьindex.jsмодули упакованы вbundle.js, то дляindex.htmlПросто справка, это самый простой принцип упаковки веб-пакетов.

2.4 Запуск упаковки веб-пакета

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

// webpack全局安装的情况下
webpack src/index.js --output dist/bundle.js  
// --output可简写为-o

Вышеприведенное эквивалентноsrcв папкеindex.jsфайлы упакованы вdistпод файломbundle.js, затем генерируетbundle.jsзаindex.htmlссылка на файл.

Результат выглядит следующим образом:

Видно, что webpack компилируется одновременноindex.jsиhello.js, Теперь откройтеindex.html, вы можете увидеть следующие результаты:

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

2.5 Использование веб-пакета через конфигурационные файлы

На самом деле у вебпака много функций и он очень удобен, мы можем создать новый конфигурационный файл в корневом каталоге текущего проекта.webpack.config.js, мы записываем следующий простой код конфигурации, который в настоящее время включает только конфигурацию входа (эквивалентную нашейindex.js, начать упаковку с него) и экспортировать конфигурацию (аналог той, которую мы упаковалиbundle.js).

// webpack.config.js
module.exports = {
    entry: __dirname + "/src/index.js", // 入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    }
}

Примечание:__dirname— глобальная переменная в node.js, указывающая на каталог, в котором находится исполняемый в данный момент скрипт, т. е. C:\Users\sjt\DeskTop\webpack-project (это мой текущий каталог)

Но конфигурация скаффолдинга, которую мы видим, обычно предпочитает использовать node.js.pathМодуль обрабатывает абсолютные пути, поэтому мы также можем использовать следующий метод записи, который имеет тот же эффект, что и выше:

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    }
}

Примечание:path.joinФункция заключается в сращивании фрагментов пути.

С этим конфигурационным файлом мы просто запускаем в терминалеwebpackКоманда может быть упакована.Эта команда будет автоматически обращаться к параметрам конфигурации в файле webpack.config.js.Пример:

Готово, неужели так удобнее, не так низко чувствуется, а может удобнее и шустрее? Это необходимо!

2.6 Умная упаковка

Мы пока используем только терминалwebpackкоманду на упаковку, если в дальнейшем при упаковке будет больше операций, то не надо ли писать больше команд? Поэтому нам нужно найти способ интегрировать эти команды.package.jsonФайлы пригодятся. Текущий файл package.json выглядит так:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" //我们要修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  }
}

изменить, как показано ниже:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack", //改成这样，注意使用时把注释删掉
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2"
  }
}

Примечание. Сценарий в package.json выполнит соответствующую команду в соответствии с заданным вами именем команды.

Таким образом, мы можем выполнить его прямо в терминале.npm startкоманда для упаковки,startКоманда специальная, вы можете напрямуюnpmплюсstartможет быть выполнено, если мы подумаем о других именах, таких какbuild, вам нужно использоватьnpm runплюсbuild,Сейчасnpm run buildЗаказ. Теперь мы выполняемnpm startЗаказ:

Хорошо, это сделано, не так ли это просто, но функция webpack намного больше, давайте продолжим.

3. Создайте локальный сервер

Теперь мы просматриваем страницу, открывая локальный файл. Он всегда кажется относительно низким. Когда другие используют фреймворки vue и react, все они работают на локальном сервере. Можем ли мы сделать то же самое? Это необходимо!

3.1 webpack-dev-server настроить локальный сервер

Webpack предоставляет необязательный локальный сервер разработки.Этот локальный сервер построен на node.js.Это отдельный компонент, который необходимо установить отдельно как зависимость проекта перед настройкой его в webpack:

cnpm i webpack-dev-server -D

devServer — это один из параметров конфигурации веб-пакета, вот некоторые из его параметров конфигурации:

contentBase: установить каталог файла, читаемого сервером, в настоящее время мы устанавливаем его как "./dist"
port: Установите номер порта, если он не указан, по умолчанию8080
inline: Установить какtrue, который автоматически обновит страницу при изменении исходного файла.
historyApiFallback: Установить какtrue, все переходы будут указывать наindex.html

Теперь мы добавляем эти конфигурации вwebpack.config.jsфайл следующим образом:

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",   // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    }
}

мы продолжаемpackage.jsonДобавьте команду запуска в файл:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

мы кладемstartИмя команды изменено наbuild, что является более семантическим, и большая часть строительных лесов обычно принимает это имя.dev(аббревиатура от development, означающая среду разработки) для запуска локального сервера,webpack-dev-serverэто команда для запуска сервера,--openОн используется для автоматического открытия браузера после запуска сервера. В это время отражается удобство нашего пользовательского метода команд. Несколько команд могут быть интегрированы и выполняться вместе, то есть мы определяемdevИмена команд могут выполняться одновременноwebpack-dev-serverи--openдве команды.

Теперь введите в терминалеnpm run devЗапустите сервер:

Чтобы мы могли просматривать страницу в http://localhost:8088/ (выходим с сервера, используемctrl+c, затем нажмитеyПодтвердите, вы можете выйти из работы сервера)

3.2 Конфигурация отладки исходных карт

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

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

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map'  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
}

После настройки снова запускаемnpm run buildУпаковка, то мы найдем вdistВ папке есть еще одинbundle.js.mapФайл следующим образом:

Если в нашем коде есть ошибка, средство отладки браузера подскажет местонахождение ошибки, т.е.devtool: 'source-map'Роль элементов конфигурации.

4. Погрузчики

Загрузчики являются одной из самых мощных функций веб-пакета.Через различные загрузчики веб-пакет имеет возможность вызывать внешние скрипты или инструменты для обработки файлов в разных форматах, таких как размещениеscssПреобразовать вcss, конвертировать ES66, ES7 и другие грамматики в грамматики, которые могут распознавать текущие браузеры, и конвертировать JSX в js и многие другие функции.

Загрузчики должны быть установлены отдельно и должны бытьwebpack.config.jsсерединаmodulesНастройте под пунктом конфигурации.Конфигурация загрузчиков включает в себя следующие аспекты:

test: регулярное выражение, соответствующее расширению файлов, обрабатываемых загрузчиками (обязательно)
loader: имя загрузчика (обязательно)
include/exclude: вручную добавлять файлы (папки), которые необходимо обрабатывать, или блокировать файлы (папки), которые не нужно обрабатывать (опционально);
options: предоставляет дополнительные параметры настройки для загрузчиков (необязательно)

4.1 Настройка css-загрузчика

Если мы хотим загрузить файл css, нам нужно установить конфигурациюstyle-loaderиcss-loader:

cnpm i style-loader css-loader -D

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            }
        ]
    }
}

Создаем новый в папке srccssпапку, создайте новую папку в этой папкеstyle.cssдокумент:

/* style.css */
body {
    background: gray;
}

существуетindex.jsЦитирую в:

//index.js 
import './css/style.css';  //导入css

const hello = require('./hello.js');
document.querySelector("#root").appendChild(hello());

В этот момент мы бежимnpm run dev, вы обнаружите, что фон страницы стал серым.

Что делать, если вы хотите скомпилировать файлы sass?

4.2 Настройка sass

cnpm i sass-loader node-sass -D // 因为sass-loader依赖于node-sass，所以还要安装node-sass

Добавьте правила sass:

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            }
        ]
    }
}

Создайте новый в папке cssblue.scssдокумент:

/* blue.scss */
$blue: blue;
body{
    color: $blue;
}

существуетindex.jsвведен вblue.scss:

//index.js 
import './css/style.css';   // 导入css
import './css/blue.scss';   // 导入scss

const hello = require('./hello.js');
document.querySelector("#root").appendChild(hello());

В настоящее времяnpm run devПерезапустите сервер, и должен появиться следующий результат:

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

5. Вавилон

На самом деле Babel — это платформа для компиляции JavaScript, которая может компилировать код, который поможет вам достичь следующих целей:

Позволяет использовать последний код JavaScript (ES6, ES7...) независимо от того, полностью ли новый стандарт поддерживается используемыми в настоящее время браузерами;
Позволяет использовать языки, которые были расширены на основе JavaScript, например JSX React;

5.1 Установка и настройка Babel

Babel на самом деле представляет собой несколько модульных пакетов, основные функции которых расположены вbabel-coreВ пакете NPM WebPack может использовать свои разные пакеты вместе. Для каждого из ваших потребностей или расширения необходимо установить отдельный пакет (с максимальным анализом ES6babel-preset-envУпаковка и парсинг JSXbabel-preset-reactСумка).

cnpm i babel-core babel-loader babel-preset-env babel-preset-react -D
// babel-preset-env的env表示是对当前环境的预处理，而不是像以前使用babel-preset-es2015只能针对某个环境

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

Теперь, когда мы можем поддерживать синтаксис ES6 и JSX, давайте попробуем его с реагированием, но чтобы использовать реагирование, нам нужно сначала установить два модуля.reactиreact-dom.

cnpm i react react-dom -S

Далее мы ставимhello.jsИзмените файл:

// hello.js
import React, {Component} from 'react'; // 这两个模块必须引入

let name = 'Alan';

export default class Hello extends Component{
    render() {
        return (
            <div>
                {name}
            </div>
        );
    }
}

Исправлятьindex.jsдокумент:

//index.js 
import './css/style.css';  // 导入css
import './css/blue.scss';  // 导入scss

import React from 'react';
import {render} from 'react-dom';
import Hello from './hello'; // 可省略.js后缀名

render(<Hello />, document.getElementById('root'));

беги в это времяnpm run devПосле этого вы можете обнаружить следующие результаты:

Это потому, что официальный дефолтbabel-loader | babelСоответствующие версии должны быть согласованы: т.е.babel-loaderТребуется последняя версияbabel, пожалуйста, обратитесь кэтот блог.

Два решения:

Откатиться на более низкую версию

cnpm i babel-loader@7 babel-core babel-preset-env -D

Обновление до максимальной версии:

cnpm i babel-loader @babel/core @babel/preset-env webpack -D

То, что я принял здесь, является первым решением, после отката запустите его сноваnpm run devБыли получены следующие результаты:

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

5.2 Оптимизация конфигурации Babel

Хотя вавилон вполне можетwebpack.config.jsОднако разве сейчас мы все не выступаем за модульность?Может быть, Babel расширился и было добавлено больше элементов конфигурации? Тогда мы могли бы также извлечь его и поместить в корневой каталог..babelrcПод файлом (вебпак автоматически вызовет.babelrcпараметры конфигурации babel в ).

Создаем новый проект в корневом каталоге проекта.babelrcдокумент:

// webpack.config.js
const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    }
}

// .babelrc 使用时把注释删掉，该文件不能添加注释
{
    "presets": ["env", "react"]
}

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

6. Плагины

Плагины используются для расширения функциональности Webpack, они действуют на протяжении всего процесса сборки и выполняют соответствующие задачи. Загрузчики и плагины часто путают, но на самом деле это совершенно разные вещи, так сказать, загрузчики используются для обработки исходных файлов (JSX, Scss, Less..) в процессе сборки упаковки, по одному, плагины Это не напрямую управлять отдельными файлами, это напрямую влияет на весь процесс сборки.

6.1 Как использовать плагин

Чтобы использовать плагин, вам нужно пройтиnpmустановить, а затемwebpack.config.jsфайл конфигурацииplugins(является массивом) Добавьте экземпляр подключаемого модуля в элемент конфигурации.Давайте сначала воспользуемся простым подключаемым модулем с заявлением об авторских правах.

// webpack.config.js
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')  // new一个插件的实例 
    ]
}

бегатьnpm run buildПосле упаковки видимbundle.jsФайл выглядит следующим образом:

6.2 Автоматически генерировать HTML-файлы (HtmlWebpackPlugin)

До сих пор мы использовалиindex.htmlфайл, но и импортированные вручнуюbundle.js, если в будущем мы добавим более одного js-файла и изменим имя js-файла, нам придется изменить его вручнуюindex.htmljs имя файла в формате , может ли оно быть сгенерировано автоматически?index.htmlА как насчет автоматической ссылки на упакованный js?HtmlWebpackPluginДля решения этой проблемы используются плагины:

Сначала установите плагин

cnpm i html-webpack-plugin -D

Затем мы вносим некоторые изменения в структуру проекта:

Пучокdistудалить всю папку;
существуетsrcсоздать новую папкуindex.template.html(Настройка имени) шаблон файла (конечно, это необязательно, потому что даже если шаблон не установлен,HtmlWebpackPluginПлагин также генерирует по умолчаниюhtmlфайл, здесь мы устанавливаем модуль, чтобы сделать нашу разработку более гибкой), следующим образом:

<!-- index.template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Here is Template</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>

webpack.config.jsв мы представилиHtmlWebpackPluginПодключите и настройте шаблон, который ссылается на наши настройки, следующим образом:

// webpack.config.js
const path = require('path');  // 路径处理模块
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件

module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        })
    ]
}

Затем мы используемnpm run buildУпакуйте его, и вы найдете,distпапка иhtmlФайлы создаются автоматически следующим образом:

Почему он генерируется автоматическиdistА папки? потому что мыoutputЭлемент конфигурации экспорта определяет расположение файла экспорта какdistпапка, а имя файла экспортаbundle.js,такHtmlWebpackPluginавтоматически поможет вамindex.htmlупоминается вbundle.jsфайл, если вы находитесь вwebpack.config.jsИмя файла экспорта было изменено в файле,index.htmlОн также автоматически изменит имя файла, чтобы его было удобнее изменить позже?

6.3 Очистка`/dist`Папка (CleanWebpackPlugin)

Вы могли заметить, что после того, как мы удалили/distпапка, из-за наследия предыдущих примеров кода, наш/distПапки захламлены.webpackсоздаст файлы, затем поместит эти файлы в/distпапка, ноwebpackНевозможно отследить, какие файлы на самом деле используются в проекте.

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

cnpm i clean-webpack-plugin -D

// webpack.config.js
...
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件

module.exports = {
    ...
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new CleanWebpackPlugin(['dist']),  // 所要清理的文件夹名称
    ]
}

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

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

6.4 Горячее обновление (плагин HotModuleReplacement)

HotModuleReplacementPlugin(HMR) — очень полезный плагин, который может автоматически обновлять эффект предварительного просмотра после изменения кода. метод:

devServerдобавить в конфигурациюhot: trueпараметр.
так какHotModuleReplacementPluginдаwebpackМодуль поставляется с ним, так что импортируйте егоwebpackпосле, вpluginsЕго можно использовать непосредственно в элементе конфигурации.

// webpack.config.js
...
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块

module.exports = {
    ...
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true // 热更新
    },
    ...
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new CleanWebpackPlugin(['dist']),  // 传入所要清理的文件夹名称
        new webpack.HotModuleReplacementPlugin() // 热更新插件 
    ]
}

На этом этапе мы перезапускаем проектnpm run devПосле изменитьhello.jsсодержимое, вы обнаружите, что эффект предварительного просмотра браузера будет автоматически обновляться (возможно, ответ будет медленнее, потому что мы используемsource-mapи другие эффекты конфигурации, мы рассмотрим их позже, когда код будет разделен).

7. Оптимизация и расширение проекта

7.1 Разделение кода

В текущей среде разработки рекомендуется модульность, и webpack не является исключением.webpack.config.jsКонфигурационный файл, на самом деле, настроено очень много, если в будущем добавится больше конфигураций, он не будет слепить глаза, поэтому лучше всего разделить его для удобства управления:

1, Мы создаем три новых файла в корневом каталоге, которыеwebpack.common.js,webpack.dev.js,webpack.prod.js, которые представляют общедоступный файл конфигурации, файл конфигурации среды разработки и файл конфигурации рабочей среды (имеется в виду среда, когда проект переходит в онлайн).

2, Установите плагин модуля слияния:

cnpm i webpack-merge -D

3. будетwebpack.config.jsКод разбивается на три вновь созданных файла, а затемwebpack.config.jsУдаление файла следующим образом:

// webpack.common.js
const path = require('path');  // 路径处理模块
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件

module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
}

// webpack.dev.js
const merge = require('webpack-merge');  // 引入webpack-merge功能模块
const common = require('./webpack.common.js'); // 引入webpack.common.js

module.exports = merge(common, {   // 将webpack.common.js合并到当前文件
    devServer: {
        contentBase: "./dist",   // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true,  // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true     //热加载
    }
})

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件

module.exports = merge(common, { // 将webpack.common.js合并到当前文件
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    plugins: [
        new CleanWebpackPlugin(['dist']),  // 所要清理的文件夹名称
    ]
})

На данный момент каталог нашего проекта выглядит следующим образом:

4. настраиватьpackage.jsonизscriptsЗаказ:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --open --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  },
  "dependencies":{
    "react": "^16.6.0",
    "react-dom": "^16.6.0"  
  }
}

мы кладемbuildкоманда изменена наwebpack --config webpack.prod.js, что означает указывать конфигурацию упаковки наwebpack.prod.jsфайл конфигурации, тогда как раньше нам нужно было использовать толькоwebpackПочему команда работает? так какwebpackкоманда по умолчанию указывает наwebpack.config.jsЭтот файл назван, теперь мы изменили имя файла, поэтому нам нужно настроить его так, чтобы оно указывало на новый файл,devКомандная инструкция также эмпатия.

Затем мы бежимnpm run buildиnpm run dev, эффект должен быть таким же, как до того, как мы разделили код.

Примечание: сказалpackage.jsonфайла, кстати, упомяну еще несколько слов, потому что, возможно, некоторые друзья могут добавить к нам, когда мы установим модуль-D,-Sили-gЕсть некоторая путаница в команде, потому что неизвестно, когда какой суффикс добавлять. На самом деле этоpackage.jsonФайл используется нами для установки зависимостей, его можно рассматривать как инструкцию по установке зависимостей, то есть, если мы загрузим или отправим проект другим коллегам-разработчикам, мы точно не будем/node_modulesПапку тоже прислали, потому что она была слишком большая, нереальная и ненужная. Коллеги по разработке должны иметь только этоpackage.jsonфайл, затемnpm installМы можем установить все необходимые нам зависимости, но только еслиpackage.jsonЕсть запись о файле, которая добавляется при установке модуля-D,-SПричина заказа.-DПолное имя--save-devОтносится к зависимостям, которые необходимо использовать в среде разработки, которые будут записаны вpackage.jsonв файлеdevDependenciesварианты, пока-Sда--saveОтносится к зависимостям, которые необходимо использовать в производственной среде, то есть в онлайн-среде, и будут записаны вpackage.jsonв файлеdependenciesопции,-gПолное имя--globalОтносится к глобальной команде установки, которую мы можем использовать в любом проекте на этом компьютере, например, в установкеcnpmЭта команда зеркала Taobao будет использоваться-gЗаказ. Поэтому надо не забыть добавить соответствующий суффикс команды при установке модуля, чтобы наш модуль можно было отследить.Иначе, если другие коллеги по разработке возьмутся за ваш проект, будут ли они ждать у двери после выхода с работы (после школы) Вы не знаете.

Это слишком далеко, надеюсь, вам это не разонравится, но я также хочу поговорить об этом подробнее!

7.2 Несколько входов и несколько выходов

Пока у нас есть один входной файл и один выходной файл, что, если у меня будет более одного входного файла? Давай попробуем:

существуетwebpack.common.jsсерединаentryЕсть три способа записи записи, а именно строки, массивы и объекты.Обычно мы больше используем объекты, поэтому меняем его на способ записи объектов.srcновая папкаtwo.jsФайл с любое имя. Потому что есть несколько входов, должны быть несколько выходов для однозначного соответствия, такentryиoutputКонфигурация выглядит следующим образом:

// webpack.common.js
...
module.exports = {
    entry: {
        index: path.join(__dirname, "/src/index.js"),
        two: path.join(__dirname, "/src/two.js")
    }, 
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "[name].js" //打包后输出文件的文件名
    },
    ...
}

// two.js
function two() {
    let element = document.createElement('div');
    element.innerHTML = '我是第二个入口文件';
    return element;
}

document.getElementById('root').appendChild(two());

Затем мы бежимnpm run buildнашел после упаковки/distВ папке будет большеtwo.jsфайл, покаindex.htmlтакже автоматическиtwo.jsимпорт, затем мы запускаемnpm run devДисплей выглядит следующим образом:

7.3 Добавьте префикс CSS, отдельный CSS, устраните избыточный CSS и отдельные изображения

1. Увеличьте префикс css

Обычно, когда мы пишем css, некоторым свойствам нужно добавлять префикс вручную, например-webkit-border-radius: 10px;, мы можем добавить его автоматически в webpack? Это обязательно, в первую очередь должен быть установлен модуль:

cnpm i postcss-loader autoprefixer -D

После установки этих двух модулей создайте новый в корневом каталоге проекта.postcss.config.jsдокумент:

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')  // 引用autoprefixer模块
    ]
}

существуетstyle.cssДобавьте следующие стили:

/* style.css */
body {
    background: #999;
}

#root div{
    width: 200px;
    margin-top: 50px;
    transform: rotate(45deg); /* 这个属性会产生前缀 */
}

Исправлятьwebpack.common.jsв файлеcss-loaderКонфигурация:

...
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: [            
                    {loader: 'style-loader'}, // 这里采用的是对象配置loader的写法
                    {loader: 'css-loader'},
                    {loader: 'postcss-loader'} // 使用postcss-loader
                ]  
            },
            ...
        ]
    },
    ...
}

Затем мы бежимnpm run devПрефикс будет автоматически добавлен к стилю CSS, как показано ниже:

2. Отдельный CSS

Хотя концепция webpack заключается в том, чтобы упаковать CSS и JS в один файл, что, если мы хотим разделить CSS?

cnpm i extract-text-webpack-plugin@next -D  // 加上@next是为了安装最新的，否则会出错

После установки вышеуказанных плагиновwebpack.common.jsВведите и используйте плагин в файле:

// webpack.common.js
...
const ExtractTextPlugin = require('extract-text-webpack-plugin') //引入分离插件

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ExtractTextPlugin.extract({  // 这里我们需要调用分离插件内的extract方法
                    fallback: 'style-loader',  // 相当于回滚，经postcss-loader和css-loader处理过的css最终再经过style-loader处理
                    use: ['css-loader', 'postcss-loader']
                })
            },
            ...
        ]
    },
    plugins: [
        ...
        new ExtractTextPlugin('css/index.css') // 将css分离到/dist文件夹下的css文件夹中的index.css
    ]
}

бегатьnpm run buildузнаем позже/distбольше в папке/cssпапки иindex.cssдокумент.

Советы читателей (спасибо восторженным читателям): Сейчасwebpack4.xМожно использовать css-метод разделения версийmini-css-extract-pluginПлагин, конкретное использование может бытьобратитесь сюда, такая же рутина.

3. Удалите избыточный CSS

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

cnpm i purifycss-webpack purify-css glob -DПосле установки трех вышеуказанных модулей, поскольку код обычно оптимизируется в производственной среде, мы должны быть вwebpack.prod.jsНастроить в файле, импортироватьclean-webpack-pluginиglobплагины и используйте их:

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件

const path = require('path');
const PurifyCssWebpack = require('purifycss-webpack'); // 引入PurifyCssWebpack插件
const glob = require('glob');  // 引入glob模块,用于扫描全部html文件中所引用的css

module.exports = merge(common, {   // 将webpack.common.js合并到当前文件
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    plugins: [
        new CleanWebpackPlugin(['dist']),  // 所要清理的文件夹名称
        new PurifyCssWebpack({
            paths: glob.sync(path.join(__dirname, 'src/*.html')) // 同步扫描所有html文件中所引用的css
        })
    ]
})

мы вstyle.cssПопробуйте добавить дополнительный код в файл:

/* style.css */
body {
    background: #999;
}

#root div{
    width: 200px;
    margin-top: 50px;
    transform: rotate(45deg); /* 这个属性会产生前缀 */
}

.a{                 /* 冗余css */
    color: black;     
}

.b{                 /* 冗余css */
    width: 50px;
    height: 50px;
    background: yellow;
}

Затем мы бежимnpm run buildВыяснилось, что в упаковкеindex.cssнет лишнего.aи.bКоды:

/* index.css */

body {
  background: #999;
}

#root div {
  width: 200px;
  margin-top: 50px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  /* 这个属性会产生前缀 */
}
/*# sourceMappingURL=index.css.map*/

4. Обработка изображений

Мы пока не говорили об изображениях, чтобы использовать изображения, мы должны установить два загрузчика:

// 虽然我们只需使用url-loader，但url-loader是依赖于file-loader的，所以也要安装
cnpm i url-loader file-loader -D

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

// webpack.common.js
...
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader']
                })
            },
            {
                test: /\.(png|jpg|svg|gif)$/,  // 正则匹配图片格式名
                use: [
                    {
                        loader: 'url-loader'  // 使用url-loader
                    }
                ]
            },
            ...
        ]
    },
    ...
}

Давайте изменимstyle.css, измените фон на фон изображения:

/* style.css */
body {
    background: url(../images/coffee.png) top right repeat-y;  /* 设为图片背景 */
}

#root div{
    width: 200px;
    margin-top: 50px;
    transform: rotate(45deg); /* 这个属性会产生前缀 */
}

.a{
    color: black;
}

.b{
    width: 50px;
    height: 50px;
    background: yellow;
}

бегатьnpm run devПосле индикация выглядит следующим образом:

Но фоновое изображение становитсяbase64, потому что webpack автоматически оптимизирует изображение и будет отправлять меньше запросов, но что, если я захочу превратить его в путь?

мы можем поставитьwebpack.common.jsИзмените конфигурацию загрузчика и добавьтеoptionsОпции:

// webpack.common.js
...
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader']
                })
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000  // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
                        }
                    }
                ]
            },
            ...
        ]
    },
    ...
}

Затем мы бежимnpm run build, затем запуститеnpm run devэм, картинка не конвертировалась в base64, а почему картинка не отображается?

Проблема заключается в пути, путь нашей предыдущей картинки находится в../imagesпапку, но такого пути после упаковки нет, картинка находится прямо на одном уровне с файлом, поэтому нам нужноwebpack.common.jsУстановите для него папку в:

// webpack.common.js
...
module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,  // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
                            outputPath: 'images'  // 设置打包后图片存放的文件夹名称
                        }
                    }
                ]
            },
            ...
        ]
    },
    ...
}

Продолжатьnpm run buildупаковать сноваnpm run devБеги, о боже! Картинка все равно не открывается! В средстве отладки см. путь к изображению:imagesпапка, но моя../Шерстяная ткань?

Это снова включает в себя путь конфигурации.Нам также нужно установить общедоступный путь для фонового изображения в css-loader.publicPath: '../',следующее:

// webpack.common.js
...
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader'],
                    publicPath: '../'  // 给背景图片设置一个公共路径
                })
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,  // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
                            outputPath: 'images'  // 设置打包后图片存放的文件夹名称
                        }
                    }
                ]
            },
            ...
        ]
    },
    ...
}

теперь сноваnpm run buildупаковать сноваnpm run devНачни, хорошо! Без проблем!

Это живо? До сих пор мы также неосознанно решали проблему разделения изображений, так что будьте тайно счастливы!

7.4 Сжатый код

В версии webpack4.x при упаковке js будет автоматически сжиматься, иnpm run devПри работе сервера, когда вы модифицируете код, горячее обновление происходит очень медленно, это связано с тем, что webpack автоматически упаковывает его для вас после того, как вы его модифицируете, что приводит к очень медленной эффективности в среде разработки, поэтому нам нужно различать разработку среды от производственной среды.Open, то это отражает удобство нашего разделения кода,webpack.dev.jsпредставляет конфигурацию среды разработки,webpack.prod.jsПредставляет конфигурацию производственной среды, на данный момент нам нужно толькоpackage.jsonКоманда для настройки соответствующей среды в файле может быть:

{
  ...
  "scripts": {
    "build": "webpack --config webpack.prod.js --mode production",
    "dev": "webpack-dev-server --open --config webpack.dev.js --mode development"
  },
  ...
  }
}

--mode productionУказывает, что это производственная среда при упаковке, и js будет сжат сам по себе, и--mode developmentУказывает, что в настоящее время это среда разработки и ее не нужно сжимать. Это также решает проблему предупреждения, которая была оставлена ранее:

Суммировать

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

Для получения полного кода перейдите кgithub, если это может быть полезно, я надеюсь дать звезду (смеется)