みなさんこんにちは！ 今回は、Valentino Gagliardi
のWebpack 4チュートリアルの翻訳
：すべての必要な知識、0 ConfからProduction Modeへの記事がアジェンダにあります。
今回のWebpack開発チームは、人気のあるモジュールビルダー（
バンドラー ）の新世代である
webpack 4にほとんど取り組みました。
ここで使用さ
れるコードを含むリポジトリ
。ゼロ構成モジュールビルダーとしてのWebpack 4
誰も主張しません：それには強力な利点、多数の機能と設定がありますが、構成ファイルは頭痛の種です。
configの記述は、中規模および大規模のプロジェクトでは問題になりません。これがなければ、プロジェクトが存在することは困難です。 ただし、特におもちゃのアプリケーションを作成する場合は、小規模なプロジェクトが煩わしい場合があります。
Seanとwebpackチームは私たち全員の生活を改善しました
。webpack4はデフォルトの設定ファイルを必要としなくなりました！さて、それをテストします。
新しいディレクトリを作成してそこに行きます：
mkdir webpack-4-quickstart && cd $_
package.jsonを初期化します。
npm init -y
現在、webpack 4を開始しています（バージョンは現在ベータ版であるため、次に追加する必要があります）：
npm i webpack@next --save-dev
webpack-cliを追加し、別のパッケージで生活します。
npm i webpack-cli --save-dev
package.jsonを開き、ビルドスクリプトを記述します。
"scripts": { "build": "webpack" }
ファイルを保存して閉じます。 実行：
npm run build
どうしたの？
ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
Webpack 4は、アプリケーションのエントリポイントを探しています
./src ！ 理由がわからない場合は、簡単に説明します。エントリポイントは、webpackの構築を開始するファイルです。 以前のバージョンでは、
webpack.config.jsで直接宣言する必要がありました。
ただし、バージョン4以降では、エントリポイントを指定する必要はありません。 デフォルトでは
./src/index.jsから
取得されます！
ご覧ください。
./src/index.jsを作成します。
console.log(` ?`);
ビルドを再度実行します。
npm run build
ファイル
〜/ webpack-4-quickstart / dist / main.jsを取得します。
出口点も本当に設定する必要はありませんか？ まさに！
エントリポイントも出口もありません。 さらに、構成ファイルは必要ありません 。
ほとんどの場合、これは驚くことではないことを知っています。コード分割におけるwebpackの力。 しかし、私を信じてください：ゼロ設定は時々開発をスピードアップします。
生産および開発モード
多くの場合、いくつかのファイルへの構成の分離を見つけることができます。
典型的なプロジェクトには次のものがあります。
- webpack-dev-serverおよびその他の開発者のおもちゃを使用した開発用の構成。
- UglifyJSPlugin 、ソースマップなどを使用した実稼働用の構成。
大規模なプロジェクトでは構成の分離が引き続き使用されますが、webpack 4ではすべてを1行で行います。
どうして？
生産モード
と開発モードを満たします。
npm run buildの出力に注意を払うと、美しいエラーが表示されます。
「モード」オプションが設定されていません。 「開発」または「本番」でモードをオンにして、デフォルト設定を適用します。これはどういう意味ですか？ わかります。
package.jsonを開き、次のようにスクリプトオブジェクトを追加します。
"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }
そして今、試してみましょう：
npm run dev
./dist/main.jsを見て
ください 。 何が見えますか？ はい、退屈なバンドルは...削減されません。 そして、もし：
npm run build
今何 ビルドファイルが削減されました。 はい！
「プロダクション」モードでは、あらゆる種類の最適化が単独で使用されます。 そして、最小化だけではありません。
一方
、開発モードではアプリケーションの速度が最適化されますが、それ以上は最適化されません。
したがって、4番目のwebpackを使用すると、アセンブリ全体を1行で変更できます。
--modeチェックボックスを追加するだけで、まったく問題なく結果が得られます。
イノベーションが好きですか？ 今後、webpackに何を期待しますか？ コメントを書いてください。
ご清聴ありがとうございました。