技術探し

JavaScriptを中心に記事を書いていきます :;(∩´﹏`∩);:

トップ > webpack > 次のリリースであるwebpack 4の主な変更点まとめ

次のリリースであるwebpack 4の主な変更点まとめ

webpack JavaScript

移行ガイド

abouthiroppy.hatenablog.jp

ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。
2日連続になってしまった。。

qiita.com

さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0)

medium.com

After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted for. Moreover, we promised to deliver them in a faster, more stable release cycle.

ということでv4😎😎😎

v4は来年2018年の2月のどこかでリリース予定です。
一ヶ月前にアナウンスをし、RC上でリリース日が公開されます。

この記事は、rcが出るたびに更新していく予定です。

現在: rc2

使用側目線でまとめていくのでプラグインを作る人はissueを読んで下さい。

webpack 4

RC

変更

Node4のサポートがなくなりました

LTS対象である6, 8を使うか、currentの9を使ってください。

webpack-cli

CLIが移行されました。

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

github.com

もし、webpack みたいにコマンドを実行している場合はcliを入れる必要があります。

CLI経由でプラグインを入れた場合は、設定ファイルのプラグインよりも優先されます。
また、webpack-cliには設定ファイルを自動生成してくれる機能も持ちます。

github.com

詳しくはリポジトリのdocs等を参照してください。

Modeオプションの追加

production, development, noneのモードを提供します。

--mode         Mode to use (production or development)
$ webpack --mode production
// 最低限、必要な設定
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist')
  }
};

コードは以下 https://github.com/webpack/webpack/blob/next/lib/WebpackOptionsDefaulter.jsgithub.com

共通として、optimization.nodeEnvは各Modeの値となります。

production

webpack --mode production
すべての種類の最適化を行ったバンドルファイルが生成されます。
以下の有効化される機能を見るとわかりますが、今までplugins内に書いていたものがデフォルトでオンとなります。
また、ウォッチモードは持ちません。

有効化される機能
  • performance
    • hints: warning
  • optimization
    • flagIncludedChunks
    • occurrenceOrde
    • sideEffects
    • usedExports
    • concatenateModules
    • noEmitOnErrors
    • minimize

development

webpack --mode development

devtoolはevalで実行されます。

https://webpack.js.org/configuration/devtool/#development

また、ウォッチモード時のために差分ビルドの高速化がされています。

有効化される機能
  • output
    • pathinfo
  • devtool: eval
  • cache: true
  • optimization
    • namedModules
    • namedChunks

none

すべての設定を無効にします。

importの変更

コードが破壊される可能性があるので注意

import()は常に名前空間のオブジェクトを返すようになります。 __webpack_require__.r

また、CJS(CommonJS Modules)の場合はデフォルトのexportへラップされます 。
なので、import()を使いCJSをimportしている場合、そのコードはおそらく壊れます。

モジュールタイプのサポート

モジュールタイプは自動的にmjs, json, wasmに対し選択されます。
他のモジュールタイプはmodule.rules[].typeで設定する必要があります。
また、ローダ内の探査順序は以下のようになりました。
.wasm -> .mjs -> .js -> .json

javascript/auto

現行のwebpack3がこれにあたります。

CJS、AMD、ESMのすべてをサポートします。

javascript/esm

ESMのみをサポートし、他のモジュールをサポートしません。(importのみ可能)
javascript/autoよりもより厳密にESMを処理します。

  • importされた名前のものは必ずimportされたコードに存在する
  • ESMでないものはデフォルトのインポートでのみインポートでき、named importはエラーを出します
    • つまり、Node.jsと同じ挙動
.mjs

javascript/esmが使用されます。
また、import時には拡張子が必要です。

json

JSONのデータ。 解析はされません。

webassembly/experimental

WebAssemblyモジュールのサポート。
JSとWASMのモジュールのインポートが可能となります。
WASMからのexportはESMのimportにより検証され、存在しないものをWASMのexportをimportする場合はエラーがでます。

sideEffects

package.jsonへsideEffects: falseがサポートされました。
Tree Shakingに優しいモジュールのために作られました。

github.com

importへのマジックコメントの追加

webpackIncludeとwebpackExcludeがサポートされました。
Dynamic Importをしている時に、ファイルのフィルタリングを可能とします。

変更された機能・プラグイン

追加

  • optimization.minimizer
    • optimization.minimizeに対する設定を書ける
  • module.rules[].resolve
  • loaderContext.rootContext
    • contextオプション

削除

  • module.loaders
    • v2から入ったrulesを使ってください
  • loaderContext.options
  • Compilation.notCacheable
  • NoErrorsPlugin
  • Dependency.isEqualResource
  • NewWatchingPlugin

名前の変更

  • NoEmitOnErrorsPlugin -> optimize.noEmitOnErrors
    • productionモード時は標準で有効
  • ModuleConcatenationPlugin -> optimize.concatenateModules
    • productionモード時は標準で有効

その他

  • ProgressPlugin(--progress)にプラグイン名が出るようになった
  • uglifyjs-webpack-pluginがデフォルトでES2015のサポートとキャッシュと並列処理できるようになった
    • optimization.minimizeで使われている

速度

多くのパフォーマンス改善が行われました。
特にビルド周りが変わったと思います。

parcelとの比較です。

github.com

速いぞ！！！

さいごに

今年最後の技術記事となりましたが、リリースまでは更新していこうと思っています。

それでは、お楽しみに！