Browserify から Webpack に移行した

JavaScript React

ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。

ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。

npm で必要なパッケージをインストール。

# 実際は 1 行
$ npm install --save-dev webpack \
  webpack-dev-server \
  babel-core \
  babel-loader \
  babel-preset-es2015 \
  babel-preset-react \
  file-loader

Webpack の設定ファイル webpack.config.js はこんな感じで書いてみた。

module.exports = {
  entry: {
    javascript: __dirname + "/src/index.jsx",
    html: __dirname + "/src/index.html"
  },

  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]"
      }
    ]
  },

  devtool: "source-map",

  resolve: {
    extensions: ["", ".js", ".jsx"]
  }
};

あわせて package.json の scripts も修正しておく。

{
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }
}

これで npm run build でビルドが、`npm start' で開発サーバーが起動できるようになった。 webpack-dev-server 便利。