ReactとReduxを利用した開発環境をwebpack4とbabelで用意する

3971 ワード
babel webpack React webpack-dev-server redux webpack テキストリンク

検証用のサンドボックスを手元で簡単に立ち上げるとき使っているサンプルをアップデートする。以前書いたメモが webpack-serve の失速によりちょっと残念な感じなので。なお typescript で似たような感じなのはこちら。

npm init -y
npm install --save react react-dom redux react-redux
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev @babel/preset-env @babel/cli @babel/core @babel/preset-react
npm install --save-dev babel-loader style-loader css-loader html-webpack-plugin
npm install --save-dev @babel/plugin-proposal-class-properties

babel.config.js

class-properties は

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  plugins: ["@babel/plugin-proposal-class-properties"]
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
    entry: {
      main: path.resolve(__dirname, './src/', "index.js")
    },
    output: {
        path: path.resolve(__dirname, './dist/'),
        publicPath: '/',
        filename: '[name]-[hash].js'
    },
    module: {
      rules: [
      {
        test: /\.jsx?$/,
        exclude:[ /node_modules/ ],
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        exclude: [/node_modules/],
        use: ["style-loader", { loader: "css-loader", options: { url: false, modules: true } }]
      }]
    },
    devtool: 'source-map',
    devServer: {
       contentBase: path.join(__dirname, "public"),
       watchContentBase: true,
       open: true
    },
    plugins: [new HtmlWebpackPlugin({ template: "src/index.html" })]
}

src/

mkdir src

src/index.js

redux アプリとしてはだいぶ最小構成くらい。

import React from "react";
import { render } from "react-dom";
import { connect, Provider } from 'react-redux';
import { createStore } from 'redux';

const initialState = { message: "hello redux." }
const store = createStore(
  (state = initialState) =>({ ...state }), initialState
);

const App = (props) => (<div>{props.message}</div>)

const ReduxApp = connect((state) => ({ message: state.message }))(App)

render(<Provider store={store}><ReduxApp /></Provider>, document.getElementById("content"));

src/index.html

<div id="content"/>

起動

npx webpack-dev-server --mode development --open

余談

こんな小さい構成でも、production 設定で起動すると、バンドルサイズ大きすぎるぞと警告を出してくる。

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (266 KiB)
      main-edda3e4c88bd69be072f.js
関数の実行時間を取得する2つの方法
Eclipse Memory Analyzer:-dataパラメータ異常を使用した解決策