ホームページ > 記事 > ウェブフロントエンド > Webpack3 の新機能は何ですか?
Webpack3 の新機能は何ですか?
- PHP中文网オリジナル
- 2017-06-21 09:41:222573ブラウズ
この記事では、参考のために 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
Magic Comments などの機能は 2018 年にリリースされた 2.4 にすでに含まれています。 3.0 バージョンのリリースは主に、より良い製品を提供するというチームの決意の象徴であると感じています。 🎜以上がWebpack3 の新機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。