ES2015 + React の開発環境を Browserify で構築していたけど、
近いうち CSS もバンドルすることになりそうなので、
Webpack に移行することにした。
ブログに手順をメモしておく。
新規にプロジェクトを作成するときも同じ手順でいけるはず。
npm で必要なパッケージをインストール。
$ 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 便利。