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

предисловие

в предыдущей статье«Путь к изучению Webpack5 (базовый)»Что такое Webpack, почему именно Webpack и три вопроса об основных понятиях Webpack.

Эта статья начнется с практики, используйте webpack в первой главе «Базовая конфигурация» для создания базового проекта, поддерживающего модульную разработку, и используйте веб-пакет во второй главе «Расширенная конфигурация» для создания проекта SASS + TS + React.

Информация о версии веб-пакета, от которой зависит эта статья, выглядит следующим образом:

webpack-cli@4.7.2
webpack@5.46.0

1. Базовая конфигурация

Затем вместе настройте базовый Webpack.

Будут поддерживаться следующие функции:

Раздельная конфигурация среды разработки и производственной среды;
Модульная разработка;
sourceMap находит предупреждения и ошибки;
Динамически создавать файлы HTML5, которые импортируют bundle.js;
Своевременная компиляция;
Инкапсулируйте команды компиляции и упаковки.

Студенты, которые хотят увидеть конфигурацию напрямую -> адрес исходного кода этой статьи:webpack Demo0

1. Создайте новый проект

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

// 新建 webpack-demo 文件夹
mkdir webpack-demo

// 进入 webpack-demo 目录
cd ./webpack-demo

// 初始化项目
npm init -y

Создайте два новых файла js и разработайте их модульно:

// 进入项目目录
cd ./webpack-demo

// 创建 src 文件夹
mkdir src

// 创建 js文件
touch index.js
touch hello.js

index.js:

// index.js

import './hello.js'

console.log('index')

привет.js:

// hello.js
console.log('hello webpack')

Структура проекта следующая:

- src
    - index.js
    - hello.js
- package.json
- node_modules

2. Установка

Установить узел

Узел должен бытьПоследняя версия, рекомендуется использовать nvm для управления версиями Node.

Буду Node.jsОбновление до последней версии также может помочь повысить производительность. В дополнение к этому добавьте свой инструмент управления пакетами (например,npm или yarn) до последней версии, что также помогает повысить производительность. Более новые версии строят более эффективные деревья модулей и повышают скорость синтаксического анализа.

Узел:адрес установки
НВМ:адрес установки

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

node v14.17.3
npm v6.14.13)

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

npm install webpack webpack-cli --save-dev

3. Создайте новый файл конфигурации

разработка (среда разработки) а также производство (производственная среда)Существует огромная разница в целях сборки в этих двух средах. Для ясности и лаконичности кода написан для каждой средыОтдельные конфиги веб-пакетов.

// 进入项目目录
cd ./webpack-demo

// 创建 config 目录
mkdir config

// 进入 config 目录
cd ./config

// 创建通用环境配置文件
touch webpack.common.js

// 创建开发环境配置文件
touch webpack.dev.js

// 创建生产环境配置文件
touch webpack.prod.js

webpack-merge

Используйте webpack-marge для объединения общей конфигурации и конфигурации для конкретной среды.

Установите слияние веб-пакетов:

npm i webpack-merge -D

Общая конфигурация среды:

// webpack.common.js

module.exports = {} // 暂不添加配置

Конфигурация среды разработки:

// webpack.dev.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {}) // 暂不添加配置

Конфигурация производственной среды:

// webpack.prod.js

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {}) // 暂不添加配置

Структура проекта следующая:

- config
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js
- src
    - index.js
    - hello.js
- package.json
- node_modules

4. Вход

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

В этом примере src/index.js используется в качестве точки входа в проект, а веб-пакет запускается с src/index.js для поиска всех зависимых модулей.

Измените webpack.commom.js:

module.exports = merge(common, {
  // 入口
  entry: {
    index: './src/index.js',
  },
})

5. Выход (выход)

outputатрибут сообщает webpack, куда выводить созданный им выводbundle, и как назвать эти файлы.

Выходные данные производственной среды должны различать версию и изменение через значение хеш-контента, что может привести к очистке кеша иРади эффективности построения локальная среда не вводит хеш контента..

Добавлен файл paths.js для инкапсуляции метода пути:

const fs = require('fs')
const path = require('path')

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

module.exports = {
  resolveApp,
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appSrc: resolveApp('src'),
  appDist: resolveApp('dist'),
  appTsConfig: resolveApp('tsconfig.json'),
}

Измените файл конфигурации среды разработки webpack.dev.js:

module.exports =  merge(common, {
  // 输出
  output: {
    // bundle 文件名称
    filename: '[name].bundle.js',
    
    // bundle 文件路径
    path: resolveApp('dist'),
    
    // 编译前清除目录
    clean: true
  },
})

Измените файл конфигурации рабочей среды webpack.prod.js:

module.exports =  merge(common, {
  // 输出
  output: {
    // bundle 文件名称 【只有这里和开发环境不一样】
    filename: '[name].[contenthash].bundle.js',
    
    // bundle 文件路径
    path: resolveApp('dist'),
    
    // 编译前清除目录
    clean: true
  },
})

Заполнители для имени файла выше объясняются следующим образом:

[name]- имя чанка (например,[name].js -> app.js). Если у чанка нет имени, в качестве имени будет использоваться его id
[contenthash]- md4-хэш содержимого выходного файла (например,[contenthash].js -> 4ea6ff1de66c537eb9b2.js)

6. Режим

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

опции	описывать
`development`	буду`DefinePlugin` середина `process.env.NODE_ENV`Значение установлено на`development`, Включите допустимые имена для модулей и чанков.
`production`	буду`DefinePlugin` середина `process.env.NODE_ENV`Значение установлено на`production`. включить детерминированные запутанные имена для модулей и чанков,`FlagDependencyUsagePlugin`,`FlagIncludedChunksPlugin`,`ModuleConcatenationPlugin`,`NoEmitOnErrorsPlugin` а также `TerserPlugin`.

Измените файл конфигурации среды разработки webpack.dev.js:

module.exports =  merge(common, {
  // 开发模式
  mode: 'development',
})

Измените файл конфигурации рабочей среды webpack.prod.js:

module.exports =  merge(common, {
  // 生产模式
  mode: 'production',
})

7. Source Map

Когда webpack объединяет исходный код, может быть сложно отследить исходное расположение ошибок и предупреждений в исходном коде.

Чтобы упростить отслеживание ошибок и предупреждений, JavaScript предоставляетsource mapsфункция, которая может отображать скомпилированный код обратно в исходный исходный код.

Измените файл конфигурации среды разработки webpack.dev.js:

module.exports =  merge(common, {
  // 开发工具，开启 source map，编译调试
  devtool: 'eval-cheap-module-source-map',
})

Есть много исходных картДоступные Варианты. В этом примере выборeval-cheap-module-source-map

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

После завершения вышеуказанной конфигурации вы можете пройтиnpx webpack --config config/webpack.prod.jsУпаковать и скомпилировать.

После компиляции будет сгенерирована такая структура каталогов:

8. HtmlWebpackPlugin

npx webpack --config config/webpack.prod.jsПосле создания только bundle.js нам также нужен файл HTML5 для динамического импорта упакованных и сгенерированных файлов пакетов.

представлятьHtmlWebpackPluginПлагин, который создает файл HTML5, который включает использованиеscriptВсе пакеты webpack в теле тега.

Установить:

npm install --save-dev html-webpack-plugin

Измените общий файл конфигурации среды webpack.commom.js:

module.exports = {
  plugins: [
    // 生成html，自动引入所有bundle
    new HtmlWebpackPlugin({
      title: 'release_v0',
    }),
  ],
}

Пересобрать веб-пакетnpx webpack --config config/webpack.prod.js, результирующая структура каталогов выглядит следующим образом:

Файл index.html создается заново, а файл bundle.js добавляется динамически:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>release_v0</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <script defer="defer" src="index.468d741515bfc390d1ac.bundle.js"></script>
 </head>
 <body></body>
</html>

9. DevServer

Каждый раз, когда вы компилируете свой код, запускайте его вручнуюnpx webpack --config config/webpack.prod.jsпокажется хлопотным,webpack-dev-serverПомогите нам автоматически компилировать код после его изменения.

webpack-dev-serverПредоставляет базовый веб-сервер с перезагрузкой в реальном времени.

webpack-dev-serverраспределение по умолчаниюconpress: true, включено для каждого статического файлаgzip compression.

Установить:

npm install --save-dev webpack-dev-server

Измените файл конфигурации среды разработки webpack.dev.js:

module.exports = merge(common, {
  devServer: {
    // 告诉服务器从哪里提供内容，只有在你想要提供静态文件时才需要。
    contentBase: './dist',
  },
})

После завершения вышеуказанной конфигурации вы можете пройтиnpx webpack serve --open --config config/webpack.dev.jsСвоевременная компиляция.

Эффект показан на рисунке:

10. Выполните команду

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

Настройте переменные среды через cross-env, чтобы отличить среду разработки от производственной среды.

Установить:

npm install --save-dev cross-env

Измените package.json:

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack serve --open --config config/webpack.dev.js",
        "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"
      },
}

Директиву webpack теперь можно запустить:

npm run dev: локальная сборка;
npm run build: производственная упаковка.

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

Адрес источника:webpack Demo0

2. Расширенная конфигурация

В этой главе мы продолжим улучшать конфигурацию.На основе приведенной выше конфигурации используйте Webpack для сборки проекта SASS + TS + React.

Будут поддерживаться следующие функции:

загрузить изображение;
загрузить шрифт;
загрузить CSS;
использовать SASS;
Используйте PostCSS и автоматически добавляйте префиксы к правилам CSS, анализируйте последний синтаксис CSS и внедряйте css-модули для разрешения глобальных конфликтов имен;
используйте Реакт;
Используйте TypeScript.

Студенты, которые хотят увидеть конфигурацию напрямую -> адрес исходного кода этой статьи:webpack Demo1

1. Загрузите изображение (Изображение)

В webpack 5 вы можете использовать встроенныйAsset Modules, чтобы смешать изображения в нашей системе.

Измените общий файл конфигурации среды webpack.commom.js:

const paths = require('./paths');
module.exports = {
    module: {
        rules: [
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            include: paths.appSrc,
            type: 'asset/resource',
          },
        ],
      },
}

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

2. Загрузите шрифт (Font)

использоватьAsset ModulesПолучите файлы шрифтов.

Измените общий файл конфигурации среды webpack.commom.js:

module.exports = {
    module: {
        rules: [
            {
               test: /.(woff|woff2|eot|ttf|otf)$/i,
               include: [
                  resolveApp('src'),
                ],
               type: 'asset/resource',
             },
         ]
     }
 }

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

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

3. Загрузите CSS

Для модуля JavaScriptimportФайл CSS, который необходимо установить и настроить.style-loader а также css-loader.

3.1 style-loader

style-loader используется для вставки CSS в DOM с помощью нескольких<style></style>Автоматически вставлять стили в DOM.

3.2 css-loader

пара css-загрузчик@import а также url()Обрабатывается как парсинг jsimport/require()Точно так же CSS можно разрабатывать модульно.

3.3 Конфигурация установки

Установите связанные с CSS зависимости:

npm install --save-dev style-loader css-loader

Измените общий файл конфигурации среды webpack.commom.js:

const paths = require('./paths');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                include: paths.appSrc,
                use: [
                  // 将 JS 字符串生成为 style 节点
                  'style-loader',
                  // 将 CSS 转化成 CommonJS 模块
                  'css-loader',
                ],
              },
          ]
      }
  }

4. Использование SASS

4.1 Sass

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

4.2 sass-loader

sass-loaderЗагрузите файлы Sass/SCSS и скомпилируйте их в CSS.

4.3 Конфигурация установки

Установите зависимости, связанные с SASS:

npm install --save-dev sass-loader sass

Измените общий файл конфигурации среды webpack.commom.js:

const paths = require('./paths');
module.exports = {
    module: {
        rules: [
        {
        test: /.(scss|sass)$/,
        include: paths.appSrc,
        use: [
          // 将 JS 字符串生成为 style 节点
          'style-loader',
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },

5. Использование PostCSS

5.1 PostCSS

PostCSSэто инструмент для преобразования кода CSS с помощью инструментов и плагинов JavaScript.

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

5.2 postcss-loader

postcss-loaderиспользовать PostCSSЗагрузчик, который обрабатывает CSS.

5.3 Конфигурация установки

Установите зависимости, связанные с PostCSS:

npm install --save-dev postcss-loader postcss postcss-preset-env

Измените общий файл конфигурации среды webpack.commom.js:

const paths = require('./paths');
module.exports = {
    module: {
        rules: [
          {
            test: /\.module\.(scss|sass)$/,
            include: paths.appSrc,
            use: [
              // 将 JS 字符串生成为 style 节点
              'style-loader',
              // 将 CSS 转化成 CommonJS 模块
              {
                loader: 'css-loader',
                options: {
                  // Enable CSS Modules features
                  modules: true,
                  importLoaders: 2,
                  // 0 => no loaders (default);
                  // 1 => postcss-loader;
                  // 2 => postcss-loader, sass-loader
                },
              },
              // 将 PostCSS 编译成 CSS
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [
                      [
                        // postcss-preset-env 包含 autoprefixer
                        'postcss-preset-env',
                      ],
                    ],
                  },
                },
              },
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
        ],
      },
}

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

5. Используйте React + TypeScript

Чтобы сделать конфигурацию проекта более гибкой, вместо использования приложения create-reate-app для сборки проекта одним щелчком мыши вручную создайте элементы конфигурации, соответствующие React.

Установите связанный с React:

npm i react react-dom @types/react @types/react-dom -D

Установите связанные с TypeScript:

npm i -D typescript esbuild-loader

Для повышения производительности от традиционного ts-loader отказываются и выбирают новейший esbuild-loader.

Измените общий файл конфигурации среды webpack.commom.js:

const paths = require('./paths');
 module.exports = {
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.(js|ts|jsx|tsx)$/,
                include: paths.appSrc,
                use: [
                  {
                    loader: 'esbuild-loader',
                    options: {
                      loader: 'tsx',
                      target: 'es2015',
                    },
                  }
                ]
              },
         ]
     }
 }

TypeScriptявляется надмножеством JavaScript с добавленной к нему системой типов и может быть скомпилировано в обычный код JavaScript.

Для совместимости с файлами TypeScript добавьте новый файл конфигурации typescript tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
      }
}

Если вы хотите сохранить вещи, как в TypeScriptimport _ from 'lodash';Синтаксис используется как метод импорта по умолчанию, который необходимо добавить в файл.tsconfig.jsonустановить в"allowSyntheticDefaultImports" : true а также "esModuleInterop" : true.

Примечание: здесь есть ямы

1. `"allowSyntheticDefaultImports": true`настроить

Необходимо добавить файл конфигурации TypeScript tsconfig.json"allowSyntheticDefaultImports": trueконфигурации, иначе будет предложеноcan only be default-imported using the 'allowSyntheticDefaultImports' flag.

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true
    },
}

не добавлять"allowSyntheticDefaultImports": trueДополнительное сообщение об ошибке выглядит следующим образом:

2. tsx и jsx нельзя смешивать

Введение файла jsx в tsx сообщает о следующей ошибке:

Выше мы завершили проект SASS + TS + React, скомпилированный на основе webpack.

Адрес источника:webpack Demo1

3. Резюме

Эта статья описывает базовую настройку Webpack и расширенную настройку Webpack. Она начинается с практики Webpack и изучает Webpack вместе с вами.

В следующей статье «Дорога к изучению Webpack5 (оптимизация)» мы продолжим оптимизацию конфигурации проекта и попытаемся построить оптимальную конфигурацию Webpack, так что следите за обновлениями.

Исходный код этой статьи:

webpack Demo0
webpack Demo1

Надеюсь, это поможет вам, спасибо за чтение~

Не забудьте поставить палец вверх, чтобы подбодрить меня, пополнить ❤️

Прекрасное прошлое

Путь к изучению Webpack5 (базовый)

использованная литература

webpack.docschina.org/

предисловие

1. Базовая конфигурация

1. Создайте новый проект

2. Установка

3. Создайте новый файл конфигурации

webpack-merge

4. Вход

5. Выход (выход)

6. Режим

7. Source Map

8. HtmlWebpackPlugin

9. DevServer

10. Выполните команду

2. Расширенная конфигурация

1. Загрузите изображение (Изображение)

2. Загрузите шрифт (Font)

3. Загрузите CSS

3.1 style-loader

3.2 css-loader

3.3 Конфигурация установки

4. Использование SASS

4.1 Sass

4.2 sass-loader

4.3 Конфигурация установки

5. Использование PostCSS

5.1 PostCSS

5.2 postcss-loader

5.3 Конфигурация установки

5. Используйте React + TypeScript

Примечание: здесь есть ямы

1. "allowSyntheticDefaultImports": trueнастроить

2. tsx и jsx нельзя смешивать

3. Резюме

Прекрасное прошлое

использованная литература

1. `"allowSyntheticDefaultImports": true`настроить