Что такое веб-пакет?

Прежде чем приступить к обновлению до версии 4, давайте обсудим общее определение webpack. Обещаю, это не займет много времени.

«Webpack - это инструмент. Помогает в создании читаемого в браузере файла bundle.js *. »

Для любителей компонентов React на диаграмме дано простое аналогичное объяснение.

  1. Webpack (компонент) принимает файл webpack.config.js в качестве реквизита
  2. Строит граф зависимостей (D-Graph) и сохраняет его состояние
  3. Использует встроенные шаблоны, похожие на JSX, для создания связанных файлов.

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

Изнутри webpack делает много чего, но простым способом.

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

// Webpack ignition 
webpack --config webpack.config.js

Это запустит движок Webpack. Двигатель запустится с несколькими творениями и процессами.

  1. Создать компилятор:
// file path: node_modules/webpack/lib/webpack.js
compiler = new Compiler(options.context);

2. Создайте компиляцию:

// FIle path: node_modules/webpack/lib/Compiler.js
createCompilation() {
return new Compilation(this);
}

3. Создайте преобразователь.

//File path: node_modules/webpack/lib/Compiler.js
this.resolverFactory = new ResolverFactory();

Теперь перейдите по пути к этому коду и посмотрите, имеет ли смысл для вас вышеупомянутая диаграмма или нет.

Я уверен, что вы заметили анонимный элемент с названием «Tapable».

class Compiler extends Tapable

Что это? Прочтите здесь

Теперь проверьте конструкторы Compiler, Compilation и ResolverFactory. Вы найдете свойство «this.hooks». Это новый формат для «Плагина» в webpack 4.

Это все необходимое условие для обновлений webpack 4.

Теперь начните с обновления

Следующие типы изменений, которые необходимо сделать.

  • Режим
  • Плагины
  • Оставшееся обновление будет выполнено путем «запустить и проверить».

Начнем с самого начала

npm i webpack webpack-cli --save-dev
or 
yarn add webpack webpack-cli --dev

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

npm WARN [email protected] requires a peer of webpack@^2.2.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

Над предупреждением, необходимо обновить webpack-dev-server, а не устанавливать его одноранговые зависимости.

Проверьте версию веб-пакета в package.json. Если это все еще не последняя версия, попробуйте указанные выше команды с помощью @latest. Используйте @latest для плагинов, которые не обновляются.

Теперь все взаимозависимости разрешены, и статус - webpack@v4.*.* и webpack-cli@3.*.*

Затем добавьте режим в config: Webpack 4 представил два режима. - «разработка» и «производство».

Два способа установки.

//package.json
"build": "webpack --config config/webpack.dev.config.js --mode development"

or

//webpack.config.dev.js
{
entry: {},
mode: "development"
}

Аналогично для производственного режима (в webpack.config.prod.js)

Плагины: из webpack 4 были удалены следующие плагины. Могут быть и другие.

  • NoEmitOnErrorsPlugin
  • ModuleConcatenationPlugin
  • NamedModulesPlugin
  • CommonsChunkPlugin
  • WebpackMd5Hash
  • UglifyJsPlugin

Но как ими пользоваться сейчас? Теперь настройки этих подключаемых модулей должны входить в ключевую оптимизацию в webpack.config.

{
...
plugins:[
    // new webpack.NamedModulesPlugin()
    //new webpack.optimize.CommonsChunkPlugin({      
    //  name: 'vendor',      
    //  minChunks: Infinity,    
    //}),    
    //new WebpackMd5Hash(),
]
optimization: {
    namedModules: true, //NamedModulesPlugin()
    splitChunks: { // CommonsChunkPlugin()
        name: 'vendor',
        minChunks: 2
    },
}
...
}

Примечание. Я также собираюсь рассказать об обновлении настраиваемых подключаемых модулей до V4.

Запускаем и проверяем:

Добавьте следующую строку в свой файл webpack.config.js.

process.traceDeprecation = true;

Выполните «npm run start», который запустит «webpack - config webpack.config.js».

Теперь дальнейшая стратегия будет считывать предупреждения и ошибки консоли, решать их и двигаться дальше. Обновление моего проекта не было гладким. Я столкнулся с множеством предупреждений и ошибок. Некоторые ошибки были явными. Я должен был их прочитать, и решение было найдено. И мало кто требовал моего внимания.

Ошибка:

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

Предупреждения:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

Как расследовать? Проверьте следы. Они сообщат вам, что node_module / [[module]] вызвал ошибку или предупреждение.

Как их решить? Проверьте эту [[модуль]] последнюю версию. Обновите это

npm i [[module]]@latest --save

Я все еще получал ошибки и предупреждения.

Как я решил? Точно не помню. Но я могу дать вам несколько советов

  • Если вы используете HtmlWebpackPlugin, добавьте его в 0-й индекс плагинов.
...
plugins[
    new HtmlWebpackPlugin(),
    new OtherPlugins(),
    ...
]
...

почему это? Короче говоря, порядок имеет значение в плагинах в Webpack 4.

  • Просто используйте [contenthash] в своих выходных именах и удалите плагин webpack_md5_hash для следующего предупреждения
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
webpack-md5-hash\plugin\webpack_md5_hash.js:29:14)
  • обновление awesome-typescript-loader до ^ 5. *. *. *

Как обновить мои собственные плагины для веб-пакетов?

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

Пользователи webpack изо всех сил старались упростить обновление плагина webpack. Так что вам придется изучить их уловки.

[anything].plugin(‘this-is-old-way-plugin’,(anything, [optional_callback]))

Переведите приведенный выше старый способ расширения в webpack 4, используя следующие правила:

  • [что-нибудь] .plugin («this-is-old-way-plugin»… к …… [что-нибудь] .hooks.thisIsOldWayPlugin
  • Теперь проверьте optional_callback. Если он есть, используйте «тап», в противном случае - asyncTap.
  • Все еще не работает? Используйте всемогущий console.log
console.log(`Expose your APIs ${JSON.stringify([anything].hooks)}`)

Пример:

//Old
compiler.plugin('compilation', (compilation) => {
   compilation.plugin('html-webpack-plugin-before-html-generation',           (htmlPluginData, callback) => {
.....
}
//new way
compiler.hooks.compilation.tap('compilation', (compilation)=>{
compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync("any_name", (htmlPluginData, callback) => {
   .....
})
}

Сделайте свой плагин совместимым с webpack 3, чтобы вам не приходилось менять основную версию плагина.

if(compiler.hooks) {
   compiler.hooks.afterEmit.tapAsync('name', afterEmit);
} else {
   compiler.plugin('after-emit', afterEmit);
}

Если ваш плагин использует плагины компилятора или компиляции, просто помните, что в дальнейшем все будет «тэпируемым». Консоль регистрирует свои API и использует их. Следующая строка отнимала мое время.

//Old
const mainTemplate = compilation.mainTemplate;
mainTemplate.plugin("require-ensure", callback)
...
mainTemplate.applyPluginsWaterfall("asset-path", ...)
...
//New
mainTemplate.hooks.requireEnsure.tap("requireEnsurePlugin", callback)
....
compilation.mainTemplate.hooks.assetPath.call(...)
...

Надеюсь, у вас есть хорошее представление о том, как решать проблемы.

Перейти на Babel 7

Если вы также хотите обновить babel, следуйте https://github.com/babel/babel-upgrade

Для меня это было просто и гладко, надеюсь, это будет и для вас. Теперь мой .babelrc был изменен на

//old
{"presets":["react","es2015","stage-0"],"plugins":["syntax-dynamic-import"]}
//new 
{"presets": ["@babel/react", "@babel/preset-env"],"plugins": [      "@babel/plugin-syntax-dynamic-import"]}

Наконец-то

Вы, должно быть, нашли это полезным «Пресс-аплодисменты».