Что такое веб-пакет?
Прежде чем приступить к обновлению до версии 4, давайте обсудим общее определение webpack. Обещаю, это не займет много времени.
«Webpack - это инструмент. Помогает в создании читаемого в браузере файла bundle.js *. »
Для любителей компонентов React на диаграмме дано простое аналогичное объяснение.
- Webpack (компонент) принимает файл webpack.config.js в качестве реквизита
- Строит граф зависимостей (D-Graph) и сохраняет его состояние
- Использует встроенные шаблоны, похожие на JSX, для создания связанных файлов.
Приведенного выше определения недостаточно. Прежде чем приступить к обновлению, мы должны углубиться в изучение веб-пакета.
Изнутри webpack делает много чего, но простым способом.
Приведенная выше диаграмма стоит тысячи слов. Я не хочу писать об очевидных вещах. Я объясню несколько важных частей и потоков на этой диаграмме, чтобы помочь в обновлении.
// Webpack ignition webpack --config webpack.config.js
Это запустит движок Webpack. Двигатель запустится с несколькими творениями и процессами.
- Создать компилятор:
// 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"]}
Наконец-то
Вы, должно быть, нашли это полезным «Пресс-аплодисменты».