Webpack3 の新機能は何ですか?

この記事では、参考のために Webpack 3 の最新リリースの新機能を簡単に紹介します。

1. Webpack 3 の新機能

6 月 20 日、Webpack は最新バージョン 3.0 をリリースし、Medium で発表しました。

Webpack は現在、フロントエンド開発のほぼ標準となっているので、新しいバージョンの主な機能アップデートを見てみましょう。
全体的な変更は 2.0 と比べて大きくないので、パニックにならないでください。
Webpack 2.0 の関連ビデオ チュートリアルについては、私が録画した 20 のエピソードのビデオ チュートリアル、Webpack 2 ビデオ チュートリアルを参照してください。
以下は v3.0 リリースの機能リストです。

• node_modules は統計で ~ にマングルされなくなりました [重大な変更]

• HMR リクエストのタイムアウトは設定可能です

• 実験的なスコープホイスティング (webpack.optimize.ModuleConcatenationPlugin) を追加しました

• いくつかのパフォーマンスの改善

• ライブラリのエクスポートを選択するためのoutput.libraryExportを追加しました

• sourceMapFilenameが[contenthash][重大な変更]をサポートするようになりました

• module.noParseが関数をサポートしました

• ノードの追加: すべてのノード固有を無効にするfalseオプション追加

1.1 アップデート方法とバージョン移行

コマンドを通じて直接インストールできますが、後でバージョン番号を追加する必要があります。

npm install webpack@3.0.0 --save-dev

または

yarn add webpack@3.0.0 --dev

Webpack 2 から Webpack 3 へのアップグレードについては、公式の言葉は次のとおりです:

端末でアップグレード コマンドを実行する以上の作業は必要ありません

したがって、バージョン番号は変更されていますが、次のように結論付けることができます。変わりましたが、あまり変わらないので、ホッと一息つきます。

1.2 スコープホイスティング

以前のすべてのモジュールは、独立した関数クロージャに含まれていましたが、この処理方法はブラウザでのコード実行が遅いという問題を引き起こしていました。
開発チームは、Closure CompilerやRollupJSなどのフレームワークを参考に、関数クロージャのラッピング方法を設定可能な形式に変更しました。
以前のプラグインで設定するだけです。

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

もちろん、一部のモジュールのロードが原因で構成が成功しない可能性があります。公式 CLI パラメータ --display-optimization-bailout は、構成失敗の原因をデバッグするために提供されています。 --display-optimization-bailout 用于 debug 是什么原因导致了配置失败。

1.3 Magic Comments

其实就是可以命令 chunk name 了。

import(/* webpackChunkName: "my-chunk-name" */ 'module');

更多的使用可以参考这里。

2. 接下来的新特性

• 更好的编译缓存

• 更快的首次以及增量编译速度

• 对 TypeScript 更加友好地支持

• 修改 Long term caching

• 增加对 WASM Module 的支持

• 用户体验的改进

3. 总结

总体看来变化不大，而且如 Magic Comments

1.3 マジックコメント🎜🎜実際、チャンク名をコマンドできます。 🎜rrreee🎜詳しい使い方はこちらをご覧ください。 🎜🎜2. 次の新機能🎜🎜🎜🎜コンパイルキャッシュの改善🎜🎜🎜🎜初回および増分コンパイル速度の高速化🎜🎜🎜🎜TypeScriptのよりフレンドリーなサポート🎜🎜🎜🎜長期キャッシュの変更🎜🎜🎜 WASMモジュールのサポートを追加🎜🎜🎜🎜ユーザーエクスペリエンスの改善🎜🎜🎜🎜3. 概要🎜🎜全体的には大きな変更はなく、Magic Comments などの機能は 2018 年にリリースされた 2.4 にすでに含まれています。 3.0 バージョンのリリースは主に、より良い製品を提供するというチームの決意の象徴であると感じています。 🎜

以上がWebpack3 の新機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。