Help us understand the problem. What is going on with this article?

Webpack4が来たので使ってみた

More than 1 year has passed since last update.

注: ここに書かれてある情報は(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 して正しく表示されているか見る

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

webpack4Appスクショ

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

webpack3系Appスクショ

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

大丈夫なようです。

mimikun
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away