webpack / babel / React のセットアップ
- 元記事
- npmの代わりにyarnを利用する
-
brew install yarn
しておく
-
webpack
- module bundler
- transpileの実行 / JSファイルのバンドル , SASS / PostCSS のビルドなど
yarn add -D webpack
-
src/js/app.js
を作成してwebpack を使う-
dist/app.bundle.js
が作成される
-
./node_modules/webpack/bin/webpack.js ./src/js/app.js --output-filename ./dist/app.bundle.js
- 上のパラメータはwebpack.config.js で設定できる
- コマンドもwebpack.js の実行だけでよくなる
- entry(ソース)と output(出力先)
const path = require('path');
const paths = {
DIST: path.resolve(__dirname, 'dist'),
JS: path.resolve(__dirname, 'src/js'),
};
module.exports = {
entry: path.join(paths.JS, 'app.js'),
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
};
- package.json にbuild scriptを追加
-
yarn build
コマンドでbundleが実行される- node_modules内のバイナリファイルはyarn (npm) が探してくれる
-
"scripts": {
"build": "webpack"
}
webpack dev server
-
ブラウザでアプリケーションを開いて動作確認するにはサーバーが必要
- webpack dev server で開発中のアプリケーションをブラウザで動作確認できる
-
install
yarn add -D webpack-dev-server
- package.json にdevコマンド追加
{
"name": "webpack-babel-react-revisited",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
}
-
yarn dev
のあと、http://localhost:8080
にアクセスできるようになる - ベースになるHTMLを作成 (
src/index.html
)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Webpack Babel React revisited</title>
</head>
<body>
</body>
</html>
- webpack.config.js にcontent baseを設定
const path = require('path');
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'), // content base用のpathを追加
JS: path.resolve(__dirname, 'src/js'),
};
module.exports = {
entry: path.join(paths.JS, 'app.js'),
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
devServer: {
contentBase: paths.SRC, // dev server のcontent base設定
},
};
-
この状態で
yarn dev
すると、jsを読み込んでないので空ページが表示される -
html-webpack-plugin をインストール
yarn add -D html-webpack-plugin
- webpack.config.js にプラグインの設定を追加
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.SRC, 'index.html'),
}),
],
- 全体
const path = require('path');
// プラグインをrequire
const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js'),
};
module.exports = {
entry: path.join(paths.JS, 'app.js'),
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
devServer: {
contentBase: paths.SRC,
},
// プラグインの設定
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.SRC, 'index.html'),
}),
],
};
-
yarn dev
でconsoleにメッセージが出力される- ファイルを変更したら自動で再読込してくれる
babel
- モダンなJSでコードを書いたらtranspilerが必要
- モダンなJSを、ブラウザで実行できるJSに変換してくれる
- Reactがbabelと深く結びついてる
- 良いコードを書くためにも利用したほうがいい
- 必要なパッケージが4つ
- Babel core package
- Babel webpack loader
- Babel env preset
- Babel React preset
- まとめてinstall
yarn add -D babel-core babel-loader babel-preset-env babel-preset-react
- babel用の設定ファイル
.babelrc
をrootに作成- envとreact用のpresetを使用する
{
"presets": ["env", "react"]
}
- webpack.config.jsの更新
- 拡張子が
js
orjsx
のファイルを読み込んでbabel-loaderを使う設定
- 拡張子が
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js'),
};
module.exports = {
entry: path.join(paths.JS, 'app.js'),
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
devServer: {
contentBase: paths.SRC,
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.SRC, 'index.html'),
}),
],
// js or jsxのファイルでbabel-loaderを使う設定
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
],
},
// 拡張子を指定しなくてもimportできるようになる設定
resolve: {
extensions: ['.js', '.jsx'],
},
};
React
- react / react-dom をインストール
yarn add react react-dom
- index.html にdiv要素追加
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Webpack Babel React revisited</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- app.js を編集
import React, { Component } from 'react';
import { render } from 'react-dom';
export default class Hello extends Component {
render() {
return (
<div>
Hello from react
</div>
);
}
}
render(<Hello />, document.getElementById('app'));
-
yarn dev
すると、ブラウザにメッセージが表示される