webpack+Reactの環境構築メモ
npm install
$ cd my_project $ npm init $ npm install webpack -g $ npm install --save react react-dom $ npm install --save-dev webpack webpack-dev-server $ npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015
ReactDOM
DOM に React 要素をレンダーするためのモジュール
webpack
複数のファイルを変換してまとめるツール
たとえば複数のjsを変換してひとつにまとめたり。
babel (babel-cor)
JSコードの変換ツール
babel-loader
bableをwebpackで使うためのライブラリ
babel-preset-react
jsxをjsに変換するためのpreset(JSXはReact.createElementの糖衣構文)
babel-preset-es2015
ES2015をES5に変換するためのpreset
webpack.config.js
const webpack = require("webpack"); module.exports = { // minify // plugins: [ // new webpack.optimize.UglifyJsPlugin() // ], context: __dirname + '/src', entry: { js: './js/index.js' }, output: { path: __dirname + '/dist', filename: './js/app.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, devServer: { // contentBase: 'dist', host: '127.0.0.1', port: 8080 }, };
ビルド
webpack
開発サーバ起動
package.jsonのscriptsに
"start": "webpack-dev-server"
追加して
npm run start
http://dackdive.hateblo.jp/entry/2016/04/13/123000#webpackconfigjs-の例