今回の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に何を期待しますか？ コメントを書いてください。
ご清聴ありがとうございました。