Webpack5と反応する
2021年7月現在、create-react-app Webpack4を使用しています。残念ながら、これは、Webpack 5を試すために、依存関係をインストールし、ビルドプロセスを自分で構成する必要があることを意味します。これは、で作成されたプロジェクトcreate-react-appをWebpack5に移行するためのクイックガイドです。
1.新しいプロジェクトを作成する/既存のプロジェクトを使用する
npx create-react-app reactw5
create-react-appプロジェクトの初期化に使用した場合は、バンドル、トランスピリレーション、その他の最適化をすぐに処理できます。ただし、このセットアップではWebpack 4を使用しているため、Webpack5では使用できません。Webpack5を他のツールと一緒にインストールして構成する必要があります。
Webpackの依存関係
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin serve
yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react
yarn add -D css-loader style-loader @svgr/webpack style-loader url-loader
3.webpack.config.jsルートレベルでファイルを作成します。
Webpack 5ができたので、それを機能させるためにカスタム構成が必要です。
***これは決して本番環境に対応した構成ではありません。必要に応じて、typescript、CSSプリ/ポストプロセッサ、およびその他の最適化を処理する必要がある場合があります。しかし、うまくいけば、あなたが始めるのに十分です***
4.babel.config.jsonルートレベルでファイルを作成します。
Reactを支援するために、たくさんのbabelプラグインをインストールしました。それらを構成しましょう。
5.最後に、package.jsonファイルを更新します。
WebpackとBabelを構成したので、NPMスクリプトを置き換える必要があります。
次のコマンドでアプリケーションを起動できるはずです。 yarn start
Reactアプリでwebpack5が使用されるようになりました。乾杯！
提案された投稿
Jest — 強力な JavaScript テスト フレームワーク
テストはソフトウェア開発において不可欠な部分です。これにより、コードの信頼性が保証され、期待どおりに機能し、エラーの可能性が軽減されます。
関連記事
ネットワークテレビツイッター
古いものは再び新しくなり、以前はキラキラ輝いていたものがくすんで見えます。私は、JNCO ジーンズが 1990 年代後半の他のファッションとともにダウンタウンのクールな子供たちの間で復活したことについて話しているのではありません。
キリスト教徒の迫害: 私たちが語らないヘイトクライム
イスラム嫌悪のことは忘れてください。宗教的憎悪犯罪の主な犠牲者はキリスト教徒（そしてユダヤ人）です。
理性的な人なら誰でも、政界とメディア界が左派、さらには極左によって支配されており、政治的言説に不均衡を生み出している状況を知っています。宗教の分野では、この不均衡は明らかです。左翼の新聞やネットワークは急いでキリスト教の信仰を擁護していません。
緩やかな浸食: 人々がキャリアを無駄に浪費する方法を明らかにする
今日のペースが速く競争の激しい世界では、個人の成長、経済的安定、そして人生全体の満足度において、個人のキャリアが重要な役割を果たしています。しかし、多くの人は停滞と不満の絶え間ないサイクルに陥っており、職業生活が徐々に消耗していきます。
待ちの季節にできること（テクノロジー業界での最初の仕事に就くのを待っているとき）
新しいキャリアへの転職は、一人でやろうとすると非常に困難になる可能性があります。あなたと同じ学習レベルにあり、同様の目標、粘り強さ、意欲を共有する責任パートナーを見つけることが重要です。