Настройка скаффолдинга webpack 4+react с нуля (1)

Webpack

Предисловие:

можешь пойти ко мнеGithub/blogЧитайте дальше, если это поможет, поставьте звезду 😊

Если вы изучили учебные пособия, связанные с веб-пакетом, такие как я, и следовали официальному веб-пакетугидЯ сделал несколько простых конфигураций, но не знаю, как их использовать. Тогда эта серия статей даст вам определенный опыт настройки путем создания каркаса webpack+react. Первая статья в этой серии предназначена для того, чтобы помочь вам, когда у вас есть требования к конфигурации в будущем.Оглядываясь назад в прошлое, во-вторых, чтобы укрепить мое понимание webpack. Я объясню эту конфигурацию лесов шаг за шагом, насколько это возможно, а также напомню некоторые моменты, которые требуют внимания. Надеюсь, это поможет всем~

помещение:

  • Обязательно установите последнюю версию Node.js, введите в консолиnode -vПроверьте текущую версию, если она не установлена ​​или не последняя версия, то она указана здесьОфициальный сайт Node.jsскачивать
  • Актуальную настройку webpck я уже понял, иначе особого мастерства по этой статье не наберетесь.Конечно, можно сначала обратить на это внимание, а потом посмотреть.Не по теме, если вы ветеран webpack, пожалуйста, не забудьте закрыть эту статью Статья, ваше время очень ценно.
  • Написание текущей статьи основано на среде mac os.Если это окна, если такая же операция, как у меня, не дает результата, пожалуйста, Google
  • Будьте терпеливы, я разделю эту статью на множество подразделов, чтобы предотвратить усталость, вызванную слишком долгой концентрацией внимания, вы можете сделать перерыв и прочитать раздел.

Давайте начнем!

Создать пустую папку

Создадим на рабочем столе пустую папку с именемwebpck-react-scaffoldи откройте его в редакторе.
Перетащите эту папку в терминал, выполните:

npm init -y

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

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

потому что мы используемwebpack 4+Версия, также необходимо установитьwebpack-cli, выполните следующую команду:

npm install --save-dev webpack webpack-cli

После завершения установки вы увидитеpackage.josnеще одинdevDependenciesсвойство, это потому, что когда мы устанавливаем пакет зависимостей--save-dev, который представляет собой зависимость времени разработки. Тогда мы будем просто использовать--saveУстановите зависимости, которые представляют зависимости времени выполнения.

Убедимся, что файловая структура в корневом каталоге следующая:

  webpack-react-scaffold
  |- node_modules
  |- package.json

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

const path = require('path');

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

Конфигурация webpack представляет собой стандартный модуль Node.js CommonJS, который импортирует другие модули через require, экспортирует модули через module.exports и анализируется webpack в соответствии со свойствами, определенными объектом.

entryАтрибут определяет путь к файлу записи,outputОпределите имя файла после компиляции упаковки и путь.
Этот код означает, что webpack, файл входаsrcв каталогеapp.jsдокумент. Имя упакованного выходного файлаbundle.js, хранящийся в верхнем каталогеdistпапка.

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

  webpack-react-scaffold
+ |- config
+     |- webpack.common.config.js
  |- node_modules
+ |- src
+     |- app.js
  |- package.json

Итак, как мы его упакуем? существуетpackage.jsonНастройте следующие свойства в:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+  "start": "webpack --config ./config/webpack.common.config.js"
  },

Что ж, попробуем, как его упаковать, хотя и твоеapp.jsКода в нем нет.
Введите в консоли следующий код:

npm run start

Вы наверное видели, почему "старт",--configвозможность указать файл конфигурации.
После выполнения вы обнаружите, что в корневом каталоге есть еще одна папка:dist/js, в котором есть файл js:bundle.js, пока что мы успешно скомпилировали и упаковали файл js, то есть файл входа:app.js.

Используйте слияние веб-пакетов

Мы будем использовать файл с именемwebpack-mergeИнструмент. С «общей» конфигурацией нам не нужно дублировать код в конфигурации для конкретной среды. Проще говоря, производственная среда отличается, и конфигурация, которую мы хотим дать, также отличается, но мы можем использовать общую конфигурацию.

Начнем с установкиwebpack-merge Начинать:

npm install --save-dev webpack-merge

После установки мыconfigСоздайте два новых файла в этой папке:webpack.prod.config.js а такжеwebpack.dev.config.js, эти два файла соответствуют конфигурации рабочей среды и среды разработки соответственно.

Текущая структура каталогов:

  webpack-react-scaffold
  |- config
     |- webpack.common.config.js
+    |- webpack.prod.config.js
+    |- webpack.dev.config.js
  |- node_modules
  |- src
     |- app.js
  |- package.json

существуетwebpack.prod.config.jsВведите следующий код в:

const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');

module.exports = merge(common, {
  mode: 'production',
});

Вернуться к тому, что мы создали ранееapp.jsфайл, введите код:

var root =document.getElementById('root');
root.innerHTML = 'hello, webpack!';

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>从零配置webpack4+react脚手架</title>
</head>
<body>
  <div id="root"></div>
  <script src="../dist/js/bundle.js"></script>
</body>
</html>

Теперь структура каталогов такая (пока нет пакета компилятора, который нужно ввестиbundle.jsнет):

  webpack-react-scaffold
   |- config
      |- webpack.common.config.js
      |- webpack.prod.config.js
      |- webpack.dev.config.js
   |- node_modules
+  |- public
+     |- index.html
   |- src
      |- app.js
   |- package.json

Перед упаковкой модифицируемpackage.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-   "start": "webpack --config ./config/webpack.common.config.js",
+   "build": "webpack --config ./config/webpack.prod.config.js"
  },

Что ж, давайте попробуем скомпилировать и упаковать его дальше! Консоль выполняет следующий код:

npm run build

Мы видим, что веб-пакет перекомпилирован, что аналогично выполнению
webpack --config config/webpack.prod.conf.jsтакой же эффект.
Теперь вы можете открыть его в своем браузереpublic/index.html, посмотреть, есть ли что-то...

Установить реакцию

Введите в консоли следующий код:

npm install --save react react-dom

После завершения установки мы можем написать синтаксис JSX для реакции.

Вот официальные леса с реакциейcreate-react-appСтруктура каталогов похожа, мы находимся вsrcСоздайте новый файл js в папке,index.js, используемый для рендеринга корневого компонента.

существуетindex.jsВведите следующий код:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

и переписать с синтаксисом jsxapp.js:

import React from 'react';

function App() {
  return (
    <div className="App">Hello World</div>
  );
}

export default App;

правильноwebpack.common.config.jsЗапись в файле изменена, потому что теперь мы собираемся скомпилировать и упаковать файл.index.js:

  const path = require('path');

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

Теперь попробуйте еще разnpm run build, вы обнаружите, что упаковка не работает, почему? Тогда смотри...

использовать бабель 7

Почему мы не можем упаковать jsx, когда пишем его выше, потому что webpack вообще не может распознать синтаксис jsx, так что же нам делать? Используйте загрузчик для предварительной обработки файла.
Среди них babel-loader — это такой плагин предварительной обработки, который загружает код ES2015+, а затем использует Babel для его переноса в ES5. Тогда приступайте к его настройке!

Сначала установите модули, связанные с babel:

npm install --save-dev babel-loader @babel/preset-react @babel/preset-env @babel/core
  • **babel-loader:** использует Babel и webpack для переноса файлов JavaScript.
  • **@babel/preset-react:** транспилирует JSX реакции
  • **@babel/preset-env:** Перевести синтаксис для ES2015+
  • **@babel/core: **основной модуль Babel

Теоретически мы можем напрямуюwebpack.common.config.jsНастройте «опции» в , но лучше всего находиться в текущем корневом каталоге.Обратите внимание, что это должен быть корневой каталог! ! ! Создайте новый файл конфигурации.babelrcНастройте связанные «пресеты»:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          // 大于相关浏览器版本无需用到 preset-env
          "edge": 17,
          "firefox": 60,
          "chrome": 67,
          "safari": 11.1
        },
        // 根据代码逻辑中用到的 ES6+语法进行方法的导入，而不是全部导入
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]
}

здесь оконфигурация БебеляДокументацию можно найти на официальном сайте.

Изменить сноваwebpack.common.config.js, добавьте следующий код:

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      }
    ]
  }
}

testуказывает, что он действует на файлы, заканчивающиеся суффиксом, соответствующим правилу,useТо есть использоватьbabel-loaderтребуемые свойства,excludeСкажите нам, что нам не нужно переводить файлы в "node_modules".

Следующий:

npm run build

Можно ли его успешно запаковать? Вернитесь на свою html-страницу и посмотрите, напечатано ли «hello webpack»!

Давайте, наконец, подтвердим наш каталог:

  webpack-react-scaffold
   |- config
      |- webpack.common.config.js
      |- webpack.prod.config.js
      |- webpack.dev.config.js
   |- node_modules
   |- public
      |- index.html
   |- src
+     |- index.js
      |- app.js
+  |- .babelrc
   |- package.json

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

Категории