注: ここに書かれてある情報は(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を使用しています。
どっちも変わりませんでした。
大丈夫なようです。