Webpack4が来たので使ってみた

注: ここに書かれてある情報は(2018/02/27)現在のものとなります。

Electronで簡単なアプリを作ってやってみました。

学習で使ったソースコードはGitHubにあります。

環境

macOS 10.13
Electron
Node v8.4.0
npm v5.6.0
webpack v4.0.1

モジュールインストール

npm i -D electron
npm i -D react react-dom
npm i -D babel-core babel-preset-react babel-preset-env
npm i -D webpack babel-loader

webpack4からはwebpackコマンドは別パッケージになったので入れます。

$ webpack
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

翻訳:

CLIはwebpack-cliという別のパッケージに移動しました。
CLIを使用するにはwebpack自体に加えて 'webpack-cli'をインストールしてください。
-npmを使用する場合：npm install webpack-cli -D
-yarnを使用する場合：yarn add webpack-cli -D

webpack-cliインストール

npm i -D webpack-cli

一通りコードを書き終わったあと何もせずnpm run buildしたらエラーが出ました。

➜  test_webpackv4 git:(master) npm run build
Hash: 51ad6ef45850cddb8c4d
Version: webpack 4.0.1
Time: 82ms
Built at: 2018-2-27 19:50:00
 1 asset
Entrypoint main = main.js
   [0] ./src/index.js 251 bytes {0} [built] [failed] [1 error]

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

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
| export default class App extends Component {
|   render () {
|     return (<div>
|       <h1>Hello</h1>
|     </div>)

翻訳:

設定時の警告
'mode'オプションは設定されていません。 この環境のデフォルトを有効にするには、 'mode'オプションを 'development'または 'production'に設定します。

./src/index.jsのERROR
モジュールの解析に失敗しました：予期しないトークン（6:12）
このファイルタイプを処理するには、適切なローダーが必要な場合があります。

ここを見て実行してみます。

ここでは、Webpack4の目玉と言われるconfigファイルを書かない方法で行こうと思います。

勉強のため順番にやってみました。

1. --module-bind オプションだけ付けて実行

webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader'

結果:

➜  test_webpackv4 git:(master) webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader'

Hash: dc950f6ced7eac1b3d69
Version: webpack 4.0.1
Time: 888ms
Built at: 2018-2-27 20:07:03
 1 asset
Entrypoint main = main.js
   [0] ./src/index.js 934 bytes {0} [built] [failed] [1 error]

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

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (6:12)

  4 | export default class App extends Component {
  5 |   render () {
> 6 |     return (<div>
    |             ^
  7 |       <h1>Hello</h1>
  8 |     </div>)
  9 |   }

➜  test_webpackv4 git:(master) ✗

翻訳:

設定時の警告
'mode'オプションは設定されていません。 この環境のデフォルトを有効にするには、 'mode'オプションを 'development'または 'production'に設定します。

./src/index.jsのERROR
モジュールビルドに失敗しました：SyntaxError：予期しないトークン（6:12）

Module parse failed: Unexpected token (6:12) のエラーは消えましたが、modeオプション未設定のエラーは残っています。

なので、modeオプションを付けて実行してみます。

2. 1. のオプションに加え、--mode productionオプションを付けて実行

webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --mode production

結果:

➜  test_webpackv4 git:(master) ✗ webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --mode production
Hash: 47c238ad5361544ab60b
Version: webpack 4.0.1
Time: 248ms
Built at: 2018-2-27 20:12:37
 1 asset
Entrypoint main = main.js
   [0] ./src/index.js 934 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (6:12)

  4 | export default class App extends Component {
  5 |   render () {
> 6 |     return (<div>
    |             ^
  7 |       <h1>Hello</h1>
  8 |     </div>)
  9 |   }

翻訳:

./src/index.jsのERROR
モジュールビルドに失敗しました：SyntaxError：予期しないトークン（6:12）

WARNING in configuration のエラーは消えましたが、Module build failed のエラーはまだ残っています。

次はここを見て作業してみます。

1. .babelrc の作成

このような内容で作成します。

{
  "presets": ["env", "react"]
}

2. npm run build してみる

ビルドしてみます。

➜  test_webpackv4 git:(master) npm run build

> test_webpackv4@1.0.0 build /Users/mimikun/GitRepo/test_webpackv4
> webpack --module-bind 'js=babel-loader' --module-bind 'jsx=babel-loader' --mode production

Hash: 2f7d3439678328f20725
Version: webpack 4.0.1
Time: 3794ms
Built at: 2018-2-27 20:37:46
  Asset      Size  Chunks             Chunk Names
main.js  99.2 KiB       0  [emitted]  main
Entrypoint main = main.js
  [15] ./src/index.js 2.42 KiB {0} [built]
    + 15 hidden modules

成功しました！

3. npm start して正しく表示されているか見る

ちゃんと表示されています。

心配なので、webpack3系でビルドしたアプリと比べてみます。
このアプリではwebpack.config.jsを使用しています。

どっちも変わりませんでした。

大丈夫なようです。