Создайте проект реакции от 0 до 1, используя webpack5

Webpack

предисловие

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

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

Предварительные знания

  • Знаком с JavaScript && html && css
  • Знаком с ES6+
  • Возможность создания среды Nodejs
  • командная строка

Цель

  • Научитесь использовать webpack5 и зачем его использовать
  • Создайте среду разработки с помощью webpack5
  • Создайте производственную среду с помощью webpack5

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

Это немного старомодно, но для новых студентов я кратко представлю это здесь. Современное веб-приложение больше не состоит просто из оптимизированных html, css и javascript, оно также должно быть упаковано, сжато и скомпилировано в код, понятный браузерам, поэтому webpack стал популярным.

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

В процессе разработки webpack предоставляет сервер разработки и поддерживает HMR.Что такое HMR и как его настроить, будет подробно описано далее.Сейчас нам нужно только знать, что при сохранении кода webpack автоматически перекомпилирует и обновит браузер для нас.

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

начать строить

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

Функции, которые архитектура должна поддерживать

  • Webpack5

  • Советы по работе с командной строкой

  • es6+

  • React

  • Typescript

  • PostCSS + cssnext

  • HMR

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

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

yarn init -y

Установитьwebpackа такжеwebpack-cli

  • webpack- Библиотека упаковки модулей
  • webpack-cli- инструмент командной строки
yarn add webpack webpack-cli -D

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

Создайте новый в корневом каталогеwebpack.config.js

Entry

Входной файл, webpack сначала скомпилируется отсюда

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

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

Output

Определяет расположение упакованного вывода и соответствующее имя файла.[name]является заполнителем, здесь основано на том, что у нас есть вentryЗначение ключа, определенное в , которое эквивалентно app

module.exports = {
  /* ... */

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
}

Убедитесь, что у вас есть index.js в src, и теперь вы можете упаковывать с нашей минимальной конфигурацией. существуетpackage.jsonДобавьте следующий код в

"scripts": {
  "build": "webpack"
}

запустить команду

yarn run build

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

Plugins

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

файл шаблона

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

  • Html-webpack-plugin — создание HTML-файла из шаблона.

Установить

yarn add html-webpack-plugin -D

Создайте новый файл в корневом каталогеpublic/index.html, содержание следующее

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

где заголовок читаетсяhtml-webpack-pluginКонфигурация плагина следующая

// webpack.config.js

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

module.exports = {
  /* ... */

  plugins: [
    new HtmlWebpackPlugin({
      title: '铁木真大屏展示',
      template: path.resolve(__dirname, './public/index.html'),
      filename: 'index.html',
    }),
  ],
}

Теперь мы снова бежимyarn run build, можно увидетьdistеще один следующийindex.html, который автоматически вставляет заголовок и сценарий, эффект следующий

image-20201215104729535

Очистить перед упаковкойdist

  • clean-webpack-plugin- Удалить/очистить каталог пакета перед упаковкой

Установить

yarn add clean-webpack-plugin -D

настроить

const path = require('path')

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  /* ... */

  plugins: [
    /* ... */
    new CleanWebpackPlugin(),
  ],
}

Советы по работе с командной строкой

Установить

yarn add friendly-errors-webpack-plugin -D

настроить

// webpack.config.js
const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
  plugins: [
    new friendlyErrorsWebpackPlugin(),
  ]
}

Loaders

Webpack использует загрузчики для парсинга модулей.Если webpack хочет понимать Javascript, статические ресурсы (изображения, шрифты, css), передавать Typescript и Babel, ему необходимо настроить соответствующие правила загрузчика.

Наличие только одного HTML и некоторого количества Javascript в проекте бесполезно, нам также нужен веб-пакет, чтобы он мог делать несколько вещей:

  • Скомпилируйте последние функции Javascript во что-то, понятное браузерам
  • Модульный CSS, компиляция SCSS, cssnext в CSS
  • Импортируйте статические ресурсы, такие как изображения и шрифты.
  • Используйте свой любимый фреймворк, например React

Babel

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

yarn add babel-loader @babel/core -D
  • babel-loader- Файлы перенесены с помощью Babel и webpack.
  • @babel/core- Перевести код ES2015+

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

// webpack.config.js
module.exports = {
  /* ... */

  module: {
    rules: [
      // JavaScript
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
}

Когда Babel компилируется, он считывает конфигурацию из файла конфигурации в корневом каталоге проекта. Создайте файл конфигурации Babel в корневом каталогеbabel.config.json

{
  "presets": ["@babel/preset-env"]
}

Если не установлен@babel/preset-envнужно сначала установить

yarn add @babel/preset-env -D

изображения и шрифты

Разобрать конфигурацию загрузчика образа

module.exports = {
  /* ... */
  module: {
    rules: [
      // Images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
    ],
  },
}

Разобрать конфигурацию загрузчика файла шрифта

module.exports = {
  /* ... */
  module: {
    rules: [
      // Fonts and SVGs
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
        type: 'asset/inline',
      },
    ],
  },
}

стиль

Теперь мы хотим иметь возможность импортировать CSS в Javascript, внедрять CSS в DOM, а также хотим использовать расширенные функции CSS, такие как cssnext, для которых требуется библиотека.

  • css-loader- Разобрать импорт CSS

  • style-loader- Внедрить CSS в DOM

  • postcss-loader- Обработка CSS с помощью PostCSS

    • postcss-preset-env- Конфигурация PostCSS по умолчанию

  • postcss- PostCSS — это инструмент, позволяющий преобразовывать стили с помощью JS-плагинов. Эти плагины могут анализировать ваш CSS, поддерживать CSS-переменные и миксины, компилировать расширенный синтаксис CSS, еще не широко поддерживаемый браузерами, встроенные изображения и многие другие замечательные функции.

  • postcss-next- Плагин PostCSS, вы можете использовать последний синтаксис CSS

Установить

yarn add css-loader style-loader postcss-loader postcss-preset-env postcss postcss-cssnext -D

Создайте новый файл конфигурации PostCSS.postcss.config.js, конфигурация следующая

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
    },
  },
}

настроить загрузчик

// webpack.config.js

module.exports = {
  /* ... */
  module: {
    rules: [
      // CSS, PostCSS, and Sass
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          }, 'postcss-loader'],
      },
    ],
  },
}

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

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

// webpack.config.js

module.exports = {
 mode: 'development',
 // ...
}

использование исходных карт

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

// webpack.config.js

module.exports = {
 devtool: 'inline-source-map'
 // ...
}

HMR

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

  1. Режим прослушивания
  2. webpack-dev-server
  3. webpack-dev-middleware

Большинство случаев, используютwebpack-dev-server, в этой статье тоже используется этот, но кстати я представлю два других метода, каждый может взять то, что ему нужно.

  • Используйте режим монитора:
// package.json
{
  "watch": "webpack --watch"
}

Выполните следующую команду

yarn run watch

Теперь, когда мы сохраняем код, код будет автоматически скомпилирован, и эффект можно будет увидеть после обновления браузера, но что, если мы хотим автоматически обновить браузер, теперь наша очередьwebpack-dev-serverторговый центр.

  • webpack-dev-server

Он предоставляет нам сервер иlive relaodingСпособность, нам нужно сначала установить его

yarn add webpack-dev-server -D

Затем настройте следующим образом

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, './dist'),
    open: false,
    hot: true,
    quiet: true,
    port: 8082,
  },
}

// package.json
{
  "scripts": {
    "start": "webpack serve"
  }
}

У нас есть служба, прослушивающая порт 8082, и каталог прослушиванияdistи поддерживает HMR, теперь открытоhttp://localhost:8082, вы можете посмотреть нашу страницу, а затем изменить код, браузер автоматически обновит эффект обновления, разве это не круто!

HMR упоминается выше, его полное название Hot Module Replacement, что переводится как Горячая замена модуля. Я думаю, что это самая полезная функция, предоставляемая webpack. Она позволяет нам обновлять только измененные модули, не обновляя их все. уже включили эту функцию выше, а именноhot: true.

  • webpack-dev-middleware

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

Установитьexpressа такжеwebpack-dev-middleware

yarn add express webpack-dev-middleware -D

изменить конфигурацию

module.exports = {
  //...
  output: {
    //...
    publicPath: '/'
  }
}

publicPathэкспресс может быть определен监听服务的路径，接下来就创建我们的экспресс сервер

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

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

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

node server.js

Для удобства эту команду можно добавить вpackage.json

{
  //...
  "scripts": {
    "server": "node server.js"
  }
}

Использование машинописного текста

Установить зависимости

yarn add typescript ts-loader -D

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

{
  "compilerOptions": {
    "outDir": "./dist/",
    // "rootDir": "./src",
    "sourceMap": true, // 开启sourcemap
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true,
    "allowJs": true,
    "strict": true
  }
}


// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
       {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ]
  }
}

Используйте реакцию

настроить вышеtypescript, поддержка реакции была включена, и теперь вам нужно только установить зависимости реакции

yarn add react react-dom @types/react @types/react-dom

Затем измените файл ввода на.tsxсуффикс, содержание следующее

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const App = () => {
  return <div>hello world2</div>;
};

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

спецификация кода

Prettier

Prettier — это инструмент, ориентированный на форматирование кода, который родился в 2016 году и быстро стал популярным. Дебют - это вершина ах-.-PrettierОн фокусируется только на форматировании и не имеет возможности проверки грамматики. Он обеспечивает согласованный формат представления кода, анализируя код и сопоставляя свой собственный набор правил. Он имеет большие преимущества в улучшении кода и может быть хорошим дополнением к форматированию ESLint с помощью ESLint.

использовать

Взяв VSCode в качестве примера, вы можете установить плагин Prettier, чтобы использовать его.Если вы хотите настроить конфигурацию, вы можетеcmd+,Горячая клавиша для входа в конфигурацию vscode, выполните поиск Prettier, чтобы найти соответствующий элемент конфигурации для настройки.

Eslint

ESLint — это подключаемый модуль обнаружения, который использует сопоставление шаблонов правил для идентификации кода и создания отчетов в коде JavaScript. Его цель — обеспечить согласованность спецификаций кода, своевременно обнаруживать проблемы в коде и заранее избегать ошибок. Основное внимание ESLint уделяет качеству кода, проверке стиля кода и пометке кода, который не соответствует рекомендациям по стилю. Кроме того, ESLint также имеет некоторые функции форматирования кода.

Установите зависимости, для удобства используйте существующую конфигурацию Eslint напрямую, вотfabric

yarn add @umijs/fabric -D

Новое в корневом каталоге.eslintrc.js, конфигурация следующая

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
  globals: {},
  plugins: ['react-hooks'],
  rules: {
    'no-restricted-syntax': 0,
    'no-param-reassign': 0,
    'no-unused-expressions': 0,
  },
};

Перезапустите редактор, вы можете применить конфигурацию Eslint.

Суммировать

На данный момент мы построили простую структуру реагирования, и она поддерживаетtypescript,cssnext, HMR и других функций достаточно для небольшого проекта, и вы можете расширяться на этой основе; если у вас будет время позже, я обсужу с вами основные принципы веб-пакета с точки зрения исходного кода.

приложение

how-to-use-webpack

официальный сайт вебпака

Категории