[Basic] Не смеете трогать конфигурацию webpack?

"Это второй день моего участия в ноябрьском испытании обновлений, ознакомьтесь с подробностями события:Вызов последнего обновления 2021 г.".

предисловие

Наверняка есть одноклассники вроде меня, которые какое-то время после выпуска сопротивлялись конфигурационному файлу проекта.npm run serve/dev, из-за боязни что-то сдвинуть, он не запускается...

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

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

С чушью покончено, с предисловием покончено, но главная цель — не хотеть, чтобы все повторяли мои ошибки~

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

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

webpack — это сборщик статических модулей для JavaScript, который внутренне строит граф зависимостей из одной или нескольких точек входа, а затем объединяет каждый модуль, необходимый в проекте, в один или несколькоbundle.

Как видно из определения: webpack из коробки поддерживает только тип файлов JavaScript, на самом деле он также включает в себя тип файлов JSON. Другие статические ресурсы должны поддерживаться загрузчиком, что будет объяснено позже.

концепция

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

1. новая папка.
2. npm init -yСоздайте файл package.json.
3. npm i webpack webpack-cli --save-devУстановите зависимости веб-пакета.

Установленная версия вебпака, разные версии могут вызвать ошибки на последующих шагах (можете сообщить в комментариях ~).

веб-пакет:5.61.0
веб-пакет-cli:4.9.1
node: 14.15.0

Новый корневой каталог проектаsrcпапку, а затем создайте новую папку в папкеindex.jsа такжеutil.js.

// util.js
export function helloWebpack {
  return 'hello webpack'
}

// index.js
import { helloWebpack } from './utils'

document.write(helloworld())

создать новыйwebpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {  // 出口文件
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production' // 当前构建环境
}

существуетpackage.jsonсерединаscriptsДобавить команду пакета, выполнитьnpm run build.

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
+  "build": "webpack"
},

После завершения пакета в корневом каталоге появится еще одинdistпапка ~

Советы:Скрипт npm может запускать webpack. Принцип в том, что файл package.json можно прочитатьnode_modules/.binКоманда в каталоге, и команда представляет собой мягкую ссылку, созданную при локальной установке модуля.

Вход

Инициализируйте конфигурацию проекта вentryПоле указывает запись пакета webpack.Обратите внимание, что файл записи поддерживает только файлы JavaScript (см. график зависимостей на официальном сайте).

Возможны два варианта конфигурации записи: одностраничная и многостраничная.

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

module.exports = {
  entry: './src/index.js'
}

В многостраничной конфигурации запись является объектом.

module.exports = {
  entry： {
    app: './src/app.js',
    app2: './src/app2.js'
  }
}

ВЫХОД

Инициализируйте конфигурацию проекта вoutputВ полях указывается файл веб-пакета для упаковки экспорта и имя файла экспорта.

Как и входящая конфигурация, исходящая конфигурация имеет две конфигурации: одностраничную и многостраничную.

Перед настройкой сначала ознакомьтесь с использованием двух общих API-интерфейсов в библиотеке путей.

path.resolve: порядок справа налево, если символ начинается с /, предыдущий путь не сращивается, если он начинается с ../, предыдущий путь склеивается и не включает путь последнего раздела ; если символ начинается с ./ или без символа, предыдущий путь объединяется.

path.join: порядок справа налево, просто соединение каждого фрагмента пути.

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

const path = require('path')

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

Многостраивая конфигурация,[name]Переменная имени соответствует ключу объекта входа.

const path = require('path')

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

loader

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

Общие загрузчики показаны ниже.

имя	описывать
babel-loader	Обработать синтаксис es6+ и скомпилировать его в исполняемый браузером синтаксис js.
vue-loader	Поддерживает загрузку и анализ файлов .vue
style-loader	Вставьте css в html файл с тегом стиля
css-loader	Поддержка загрузки и анализа файлов .CSS.
sass-loader/less-loader	Конвертировать файлы sass/less в css
file-loader	Упаковка статических ресурсов, таких как изображения и шрифты
url-loader	Подобно файловому загрузчику, когда файл ниже предельного значения, он будет преобразован в base64.
ts-loader	Преобразовать Ts в Js
raw-loader	Импортировать файл как строку

Загрузчик имеет два свойства:

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

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

const path = require('path')

module.exports = {
  module: {
    rules: [{
      test: /\.txt$/,  // 匹配 txt 文件类型
      use: 'raw-loader' // 使用 raw-loader
    }]
  }
}

Плагин

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

Общие плагины показаны ниже.

имя	описывать
SplitChunksPlugin	Начиная с версии 4, CommonsChunkPlugin был удален и заменен наoptimization.splitChunks. Функция заключается в извлечении общедоступных модулей, уменьшении размера пакета и оптимизации рендеринга первого экрана.
CleanWebpackPlugin	чистая директория сборки
CopyWebpackPlugin	Скопируйте файл или папку в выходной каталог сборки.
MiniCSSExtractPlugin	Начиная с V4, удалить ExtractextextWebpackPlugin, замененный наMiniCSSExtractPlugin. Функция состоит в том, чтобы извлечь css из файла пакета в отдельный файл css и внедрить его в html в виде тега ссылки.
CssMinimizerWebpackPlugin	Минимизировать CSS-код
HotModuleReplacementPlugin	Горячее обновление модуля
HtmlWebpackPlugin	Создайте html-файл и вставьте статические файлы в этот html-файл.
UglifyjsPlugin	Minified JS, поскольку V4 был построен.
TerserWebpackPlugin	Сжатый js, начиная с v5, был собран.

Использование плагинов относительно простое, в качестве примера возьмем HTMLWebpackPlugin.

const path = require('path')

module.exports = {
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

Режим

Укажите, является ли текущая среда сборки рабочей или разрабатываемой.Значение по умолчанию:production.

Есть три значения: производство, разработка и ничего.

упражняться

Основное содержание webpack, вероятно, понятно, теперь приступим к практической части~

создать html-файл

Создайте новый файл шаблона html в каталоге src.Последующее объяснение случая будет сосредоточено на Vue, поэтому содержимое шаблона выглядит следующим образом.

<!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" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Последующая упаковка для создания html и вставка статических файлов ресурсов в html — все преимущества HtmlWebpackPlugin.

Установитьnpm i html-webpack-plugin -D.

Простая конфигурация...

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

module.exports = {
  entry: './src/index.js', 
  output: { 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 模板 html 文件路径
      filename: 'index.html', // 指定打包文件名称
      inject: true, // 向 html 模板注入所有静态资源
    })
  ]
}

Подробная конфигурацияОфициальный подробный документ конфигурации HTMLWebpackPlugin.

Поддержка ES6+

Преобразуйте код ES6+ в ES5 с помощью библиотек, связанных с babel, чтобы обеспечить совместимость с большим количеством браузерных сред.

Установите библиотечные функции, связанные с babel

npm i @babel/core @babel/preset-env babel-loader --save-dev

Добавьте разбор js-файлов в файл webpack.config.js.

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
   ]
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', 
      filename: 'index.html', 
      inject: true, 
    })
  ]
}

Создайте новый файл конфигурации .babelrc в корневом каталоге и установите зависимости:npm i core-js@3 --save-dev.

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 在文件运用到新特性的位置单独按需引入
      "corejs": 3,  // corejs 核心库的版本
      "targets": "> 0.25%, not dead" // 浏览器支持的范围
    }]
  ]
}

Конфигурация useBuiltIns помогает нам работать с новыми функциями, такими как Promise, Map, Set, Symbol и т. д. core-js (@babel/polyfill устарел в 7.4.0) — это библиотека зависимостей для обработки новых функций.

Измените файл index.js,npm run buildупаковать.

const a = () => Promise.resolve(1)
const getData = async () => {
  const res = await a()
  console.log(res)
}
getData()

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

---

расширить, наофициальный сайт бабельПопробуйте преобразовать код index.js, как указано выше.

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var a = function a() {
  return Promise.resolve(1);
};

var getData = /*#__PURE__*/function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var res;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return a();

          case 2:
            res = _context.sent;
            console.log(res);

          case 4:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function getData() {
    return _ref.apply(this, arguments);
  };
}();

getData();

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

Оптимизируй это~

Установить@babel/plugin-transform-runtimeтак же как@babel/runtime-corejs3.

Измените конфигурацию, связанную с Babel, вы можете добавитьindex.htmlСамооценочный тест.

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime", { "corejs": 3 }
    ]
  ]
}

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

var a = function a() {
  return Promise.resolve(1);
};

var getData = /*#__PURE__*/function () {
  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
    var res;
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return a();

          case 2:
            res = _context.sent;
            console.log(res);

          case 4:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function getData() {
    return _ref.apply(this, arguments);
  };
}();

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

Поддержка Vue

установить вью,npm i vue -S.

Установите соответствующие плагины,npm i vue-loader vue-template-compiler -D.

Обратите внимание, что версии vue-template-compiler должны быть согласованы, а vue — моя тестовая версия.v2.6.14. Плагины в основном используются для компиляции шаблонов Vue в функции рендеринга, что позволяет избежать накладных расходов на компиляцию во время выполнения и ограничений CSP.

Политика веб-безопасности CSP (Content Security Policy), помогающая обнаруживать и смягчать определенные типы атак, включая межсайтовые сценарии (XSS) и атаки с внедрением данных.

Создайте новые файлы main.js и App.vue.

// main.js
import Vue from 'vue'
import App from './App.vue'

export default new Vue({
  render: h => h(App)
}).$mount('#app')

// App.vue
<template>
  <div id="app">{{ message }}</div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue'
    }
  }
}
</script>

Изменятьwebpack.config.jsдокумент.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+ const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
- entry: './src/index.js',
+ entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
+   {
+     test: /\.vue$/,
+     loader: 'vue-loader'
+   }
   ]
 },
 mode: 'production',
+ plugins: [
+   new VueLoaderPlugin(),
   new HtmlWebpackPlugin({
     template: './src/index.html',
     filename: 'index.html',
     inject: true
   })
 ]
}

удалить старый пакет, выполнитьnpm run buildПеремакование, открыть index.html под папкой Dist, убедитесь, что Hello Vue отображается нормально.

Поддерживает CSS и SCSS.

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

Установите соответствующие плагины,npm i css-loader style-loader -D.

webpack.config.jsДобавьте в файл правила парсинга css-файла.

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

Вот небольшая точка знаний: загрузчик链式调用Порядок выполнения такой从右到左из. Поэтому нужно сначала написать style-loader, а потом уже css-loader.

Создайте новый файл main.css, а затем укажите его в файле App.vue.После завершения его можно упаковать для тестирования~

// main.css
.message {
  color: red;
}

// App.vue
<template>
  <div id="app">
    <div class="message">{{ message }}</div>
  </div>
</template>
<script>
import './main.css'
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue'
    }
  }
}
</script>

Большинство существующих проектов также используют препроцессоры CSS, здесь мы возьмем SCSS в качестве примера.

Установите соответствующие плагиныnpm i sass sass-loader -D.

После завершения установки измените Mainain.css на main.scss и измените импорт стиля в приложение.import './main.scss'.

webpack.config.jsДобавить файл для загрузки разбора файлов SCSS.

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
}

После завершения удалите старый пакет, переупакуйте его и протестируйте ~

Поддержка изображений и шрифтов

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

Установитьnpm i file-loader -D.

Создайте новую папку изображений и шрифтов в каталоге src, добавьте изображение в папку изображений и добавьте файл шрифта в папку шрифтов.

существуетApp.vueвведено в.

<template>
  <div id="app">
    <div class="message">{{ message }}</div>
    <div class="image">
      <img :src="Image" alt="图片" />
    </div>
  </div>
</template>
<script>
import './main.scss'
import Image from './images/image.png'
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue',
      Image: Image
    }
  }
}
</script>

Добавьте определение шрифта в папку main.scss.

@font-face {
  font-family: 'Manrope-SemiBold';
  src: url('./fonts/Manrope-SemiBold.ttf');
}
.message {
  color: red;
  font-family: 'Manrope-SemiBold';
}

webpack.config.jsФайл добавляет загрузку и анализ файлов изображений и шрифтов.

 {
   test: /.(png|jpg|gif|jpeg)$/,
   use: ['file-loader']
 }, 
 {
   test: /\.(woff|woff2|eot|ttf|otf)$/,
   use: ['file-loader']
 }

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

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

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

Используйте преобразованный формат base64 размером менее 10 КБ, как показано ниже.

{
  test: /.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 10240
    }
  }]
}

---

Те, кто знаком с v5, могут понять ресурсный модуль webpack5, и нет необходимости настраивать дополнительные загрузчики, такие как file-loader, url-loader, raw-loader.

Типы	описывать
asset/resource	Отправьте отдельный файл и экспортируйте URL. ранее с помощьюfile-loader выполнить.
asset/inline	Экспортируйте данные URI ресурса. ранее с помощьюurl-loader выполнить.
asset/source	Исходный код экспортируемого ресурса. ранее с помощьюraw-loader выполнить.
asset	Автоматический выбор между экспортом URI данных и отправкой отдельного файла. ранее с помощьюurl-loaderи настройте реализацию ограничения объема ресурсов.

Измените код ниже.

{
  test: /.(png|jpg|gif|jpeg)$/,
-  use: ['file-loader'],
+  type: 'asset/resource',
+  generator: {
+    filename: '[name][hash:8].[ext]'
+  }
}, 
{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
- use: ['file-loader'],
+  type: 'asset/resource',
+  generator: {
+    filename: '[name][hash:8].[ext]'
+  }
}

сервер разработки

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

Установитьnpm i webpack-dev-server -D.

Чтобы различать режимы производства и разработки, создайте новыйwebpack.dev.jsа такжеwebpack.prod.jsдокумент.

сделать копиюwebpack.config.js, вставить вwebpack.dev.js.

Изменить часть контента:

1. Измените пункт конфигурации режима на разработку.
2. Добавьте конфигурацию devServer, настройте горячее обновление, если горячее верно, оно будет введено автоматическиHotModuleReplaceMentPluginплагин.

devServer: {
  port: 3000, // 端口
  hot: true, // 开启热更新
  open: true // 启动开启浏览器
}

Сделайте то же самое, вставьтеwebpack.prod.js, изменения вносить не нужно, после завершения удалить оригиналwebpack.config.js.

Наконец, изменитеpackage.jsonв файлеscriptsполе.

scripts: {
  "dev": "webpack-dev-server --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js",
  "test": "echo \"Error: no test specified\" && exit 1",
}

После завершения исполняемыйnpm run devУбедитесь, что страница отображается нормально и горячее обновление вступило в силу.

Добавить отпечаток файла

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

Существует три типа отпечатков файлов.

1. хеш: Это связано с построением всего проекта.Если файл проекта изменится, значение хеш-функции всей конструкции проекта также изменится.
2. chunkhash: относится к чанку, упакованному webpack, разные записи будут генерировать разные значения хэша.
3. contenthash: хэш определяется в соответствии с содержимым файла.Если содержимое файла остается неизменным, хэш содержимого остается неизменным.

Роль снятия отпечатков файлов в основном используется в тестовых и производственных средах. Итак, нам просто нужно изменитьwebpack.prod.jsфайл.

Для типа файла js установите имя выходного файла, используя[chunkhash:8].

output: {
  path: path.join(__dirname, 'dist'),
+ filename: '[name][chunkhash:8].js'
- filename: 'bundle.js'
}

Для типа файла css в настоящее время используется загрузчик стилей, который встраивает css в файл js, а затем использует загрузчик стилей при загрузке файла js. теги стиля вставляются в html. Так как же извлечь отдельные файлы CSS? это оMiniCSSExtractPluginплагин.

Установитьnpm i mini-css-extract-plugin -D, представлен файл webpack.prod.jsconst MiniCssExtractPlugin = require('mini-css-extract-plugin').

плагины Добавьте плагин MiniCssExtractPlugin и используйте переменную contenthash.

plugins: [
  new VueLoaderPlugin(),
+  new MiniCssExtractPlugin({
+    filename: '[name][contenthash:8].css'
+  }),
  new HtmlWebpackPlugin({
    template: './src/index.html',
    inject: true,
    filename: 'index.html'
  })
]

style-loader конфликтует с MiniCSSExtractPlugin, замените style-loader на MiniCssExtractPlugin.loader

{
  test: /\.css$/,
  use: [
-   'style-loader'
+    MiniCssExtractPlugin.loader,
    'css-loader'
  ]
}, 
{
  test: /\.scss$/,
  use: [
-   'style-loader'
+    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader'
  ]
}, 

Для изображений, шрифтов и других типов задайте параметры конфигурации соответствующего загрузчика синтаксического анализа, используя[hash:8].

{
  test: /.(png|jpg|gif|jpeg)$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name][hash:8].[ext]'
    }
  }]
}, 
{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name][hash:8].[ext]'
    }
  }]
}    

сжатие кода

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

Если пользовательский, установитеnpm i terser-webpack-plugin -D.

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

optimization: {
  minimize: true， // 告知 webpack 使用 TerserPlugin 或其他使用 optimization.minimizer 定义的压缩插件 
  minimizer: [
    new TerserPlugin()
  ]
}

Говоря о сжатии кода css, v5 рекомендует использовать плагин CssMinimizer, который аналогичен плагину OptimizeCssAssetsPlugin, но использование строк запроса в исходных картах и ​​активах будет более точным, поддерживает кэширование и параллелизм в параллельном режиме и имеет встроенный cssnano, дополнительная установка не требуется.

Установитьnpm i css-minimizer-webpack-plugin -D.

Конфигурация следующая.

optimization: {
  minimizer: [
    new CssMinimizerPlugin()
  ]
}

воплощать в жизньnpm run build, возникает ошибка.

В соответствии с подсказкой установите postcss (v8.3.11), чтобы решить проблему.

очистить каталог сборки

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

Установитьnpm i clean-webpack-plugin -D.

webpack.prod.jsДобавьте плагин CleanWebpackPlugin в поле плагинов.

введение главыconst { CleanWebpackPlugin } = require('clean-webpack-plugin').

plugins: [
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({
    filename: '[name][contenthash:8].css'
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html',
    inject: true,
    filename: 'index.html'
  }),
+  new CleanWebpackPlugin()
]

---

Согласно официальному сайту webpack v5.2+, было добавлено чистое поле вывода, которое имеет ту же функцию и не требует установки плагина CleanWebpackPlugin.

Конфигурация следующая.

output {
  path: path.join(__dirname, 'dist'),
  filename: '[name][chunkhash:8].js',
+  clean: true
}

Суммировать

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

Конечно, есть и продвинутые статьи.Друзья, кому понравилось, могут лайкнуть + в избранное + подписаться ~

Ссылаться на

китайская сеть webpack
How to deal with babel-preset-env and babel-transform-runtime in babel 7.
Что такое @babel/plugin-transform-runtime?
Подробное объяснение vue-loader и vue-template-compiler
Подробный html-webpack-плагин
Geek Time - Играйте с веб-пакетом