webpack 4

[hysryt]

2018/2/25 リリース webpack4の基礎 次のリリースであるwebpack 4の主な変更点まとめ webpack4への簡単なマイグレーションガイド webpack4が出たのでメモ - Qiita 設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる - Qiita

[hysryt]

Install

$ npm install webpack webpack-cli -D

今まで webpack に含まれていたCLIが webpack-cli に分割された。

Babel系もインストールされる。 インストールされるBabel系のパッケージはwebpack用なので、Babelを使いたい場合は別途インストールする必要がある。（babel-coreやbabel-loaderなど） Babelの設定は.babelrcで行う。

[hysryt]

警告

コード分割

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds therecommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (270 KiB)
      ../js/bundle.js
      ../style.css

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

ファイルの容量が大きいとコード分割を勧められる。 require.ensure はwebpack固有の機能らしい。 webpack2 でのコード分割 (Code Splitting) について調べる - Qiita

mode

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

--mode オプションを付けないと警告が出る。

[hysryt]

ゼロコンフィグ（設定ファイル無し）

設定ファイルを使用しない場合、エントリポイントはsrc/index.js、出力先はdistディレクトリとなる。

[hysryt]

Babel

webpack.config.js

module.exports = {
  entry: ["./src/js/script.js"],
  output: {
    filename: 'output.js'
  },
  module: {
    rules: [{
      use: {
        loader: 'babel-loader',
      }
    }]
  }
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env']
  ]
}

.browserslistrc

ie 11