Рубрики
Без рубрики

Обновить до WebPack 4

Обновление до WebPack 4 может быть беспорядком, вот как мы это сделали. Tagged с Webpack, React, JavaScript.

Приложение, над которым мы сейчас работаем в Aon Cyber Solutions (1) – это выброшенный CRA с TypeScript и Apollo GraphQL. К нашему удовольствию, у нас есть webpack.config.dev.js и webpack.config.prod.js Играть и должно убедиться, что обе среды работают, как и ожидалось.

Будучи взволнованными, чтобы обновить наш сборник рассказов до V.5, мы обнаружили, что нашу Webpack также нуждается в подтяжке лица. Таким образом, пришло время ввести WebPack 4 ERA.

Посещение Официальное руководство по миграции Ваш естественный первый звонок. Следуя пошаговым инструкциям безрезультатно и некоторым разочарованием. Google, Stack Olfuling and Githubbing на помощь. Ну, ну … я не единственный разочарованный.

Вот пошаговое руководство, которое привело к успешному пряжа старт и Строительница пряжи :

Шаг 1. Обновите WebPack и установите WebPack-Cli:

yarn add webpack
yarn add webpack-cli

Проверка версии:

// package.json
...
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
...

Шаг 2. Добавить соответствующие режимы в webpack.config.dev.js и webpack.config.prod.js

// webpack.config.dev.js
...
module.exports = {
    mode: 'development',
    ...

// webpack.config.prod.js
...
module.exports = {
    mode: 'production',
    ...

Шаг 3. Добавить вилк-тк-чекер-нотификатор-webpack-plugin

yarn add fork-ts-checker-notifier-webpack-plugin --dev

Проверка версии:

// package.json
...
"fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
...

Шаг 4.1 Обновление html-webpack-plugin

yarn add html-webpack-plugin@next

Проверка версии:

// package.json
...
"html-webpack-plugin": "^4.0.0-beta.5",
...

Шаг 4.2 Отрегулируйте заказ плагина в WebPack.config.dev.js и Webpack.config.prod.js

Убедиться Htmlwebpackplugin приходит раньше Interpolatehtmlplugin и последний объявлен как в примере ниже:

plugins: [
  new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml
  }),
  new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
...

Шаг 5. Обновите TS-Loader, URL-загрузчик и файловый загрузчик

yarn add url-loader file-loader ts-loader

Проверка версии:

// package.json
...
"file-loader": "^1.1.11",
"ts-loader": "4.0.0",
"url-loader": "0.6.2",
...

Шаг 6. Обновление React-Dev-Utils

yarn add react-dev-utils

Проверка версии:

// package.json
...
"react-dev-utils": "6.1.1",
...

Шаг 7. Sub Extract-Text-Webpack-Plugin с Mini-CSS-Extract-Plugin

Избавиться от Extract-Text-Webpack-Plugin вообще. Добавить и настроить mini-css-extract-plugin Анкет

yarn add mini-css-extract-plugin

Проверка версии:

// package.json
...
"mini-css-extract-plugin": "^0.5.0",

Конфигурация:

// webpack.config.prod.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [
  ...
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  }),
  ...
],
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
        // you can specify a publicPath here
        // by default it use publicPath in webpackOptions.output
        publicPath: '../'
      }
    },
    "css-loader"
  ]
},

Шаг 8. Обновление и перенастроение uglifyjs-webpack-plugin

yarn add uglifyjs-webpack-plugin --dev

Проверка версии:

// package.json
...
"uglifyjs-webpack-plugin": "^2.1.2"

Конфигурация:

// webpack.config.prod.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  ...
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
...

Шаг 9. Исправьте любые ошибки снижения, которые вы можете получить. Следите за сообщением об ошибке и обновите и обновите любые плагины WebPack, которые вам могут понадобиться. В нашем случае это было WebPack-Manifest-Plugin Анкет

Я действительно надеюсь, что это руководство сэкономит хотя бы кого -то несколько минут/часов.

(1) Это личное сообщение в блоге, которое никоим образом не отражает официальное мнение Aon Cyber Solutions.

Источники, которые использовались, чтобы придумать рабочее решение:

Оригинал: “https://dev.to/olegchursin/upgrade-to-webpack-4-1fm5”

Читайте ещё по теме: