reactjsでアプリケーション構築した際、 production環境へのデプロイを見据えてwebpack周りの設定を見直したので それをまとめました。
webpack.config.jsのリネーム
webpack.configでbabelなコードが書きたかったのでリネーム あわせて、constじゃなくて、importでライブラリを読み込むように変更
リネーム & 書き換え
% mv webpack.config.js webpack.config.babel.js// before
const webpack = require('webpack');// after
import webpack from 'webpack';
webpack-merge
webpack.configをマージするためのモジュール。 共通設定ファイルと環境別の設定ファイルをマージするみたいな用途で利用する。
環境別でwebpack.configをかき分けたい。 手動でオブジェクトのdeep mergeするのはいやだ！みたいな人は使おう。
インストール
npm i -D webpack-merge
設定
- 共通設定:
webpack.config.babel.js NODE_ENV=production:webpack.config.prod.babel.jsNODE_ENV=development:webpack.config.dev.babel.js
import merge from 'webpack-merge';// NODE_ENVで分岐
const config = process.env.NODE_ENV === 'production' ?
require('./webpack.config.prod.babel.js') :
require('./webpack.config.dev.babel.js');const common = {
context: __dirname,
entry: './src/index.jsx',
output: {
path: `${__dirname}/public`,
publicPath: '/',
filename: 'bundle.js',
},
module: {
preLoaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'eslint' },
],
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot-loader/webpack', 'babel'] },
{ test: /\.css$/, loaders: ['style', 'css'] },
{ test: /\.json$/, loader: 'json' },
{ test: /\.(jpe?g|png|gif)$/, loader: 'url?limit=10000' },
],
},
resolve: {
extensions: ['', '.js', '.jsx', '.json'],
},
eslint: {
configFile: './.eslintrc',
},
};module.exports = merge(common, config);
npm runコマンドでwebpack呼ぶときは適宜NODE_ENVをつける。
scripts: {
start: webpack-dev-server --history-api-fallback --hot --inline --progress --colors,
build-debug: webpack --display-error-details --progress --colors,
build: NODE_ENV=production webpack --progress --colors,
},UglifyJsPlugin などでjsを最適化・圧縮
UglifyJsPluginで圧縮して、DedupePlugin, AggressiveMergingPluginで最適化する。
詳細が知りたければこちら list of plugins
設定
import webpack from 'webpack';module.exports = {
debug: false,
devtool: false,
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
comments: false,
}),
new webpack.optimize.AggressiveMergingPlugin(),
],
};
html-webpack-plugin
index.htmlに直接、bundle.jsを書き込んでいたところに、 ハッシュコード付きのscriptタグを挿入したかったのでこのプラグインを導入した。
ハッシュコードってのはこういうやつね <script src="/bundle.js?4398c4ce46af21776b47"></script>
インストール
npm i -D html-webpack-plugin
テンプレートファイルの用意
index.htmlをejsファイルにリネームし、<script src="/bundle.js" />なコードを除去する。
mv src/index.html src/index.template.ejs
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<div id="root"></div>
- <script type="text/javascript" src="/bundle.js"></script></body>
</body>
</html>設定
pluginsに下記のように設定すると、npm run buildした時にいい感じでindex.htmlを吐いてくれる。 他にもscriptとかmetaタグを<head>に入れたくなったらマニュアル見てね。
import HtmlWebpackPlugin from 'html-webpack-plugin'; plugins: [
new HtmlWebpackPlugin({
hash: true,
filename: 'index.html',
favicon: './src/favicon.jpg',
template: './src/index.template.ejs',
inject: 'body',
}),
],
出力サンプル
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<link rel="shortcut icon" href="/favicon.jpg"></head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/bundle.js?4398c4ce46af21776b47"></script></body>
</html>webpack-manifest-plugin
bundle.jsって名前だとCDNに上げた時、世代管理できない。 自動生成されたファイル名にしたいってなったらこれ。
インストール
npm i -D webpack-manifest-plugin chunk-manifest-webpack-plugin
設定
下記設定だと、entryのキーが出力後のファイル名になるので注意。 hot loadしたいのでproduction環境以外は[chunkhash]つけない。
import ManifestPlugin from 'webpack-manifest-plugin';
import ChunkManifestPlugin from 'chunk-manifest-webpack-plugin';module.exports = {
context: __dirname,
entry: {
+ bundle: './src/index.jsx',
},
output: {
path: `${__dirname}/public`,
publicPath: '/',
- filename: 'bundle.js',
+ filename: '[name].js',
}, plugins: [
+ new ManifestPlugin(),
+ new ChunkManifestPlugin({
+ filename: 'chunk-manifest.json',
+ manifestVariable: 'webpackManifest',
+ }),
]module.exports = {
context: __dirname,
entry: {
+ bundle: './src/index.jsx',
},
output: {
path: `${__dirname}/public`,
publicPath: '/',
- filename: 'bundle.js',
+ filename: '[name].[chunkhash].js',
},
]
npm run buildしたらこういうのが出力される。 manifest.jsonも吐き出されるので、なにかと連携したければそれを読み込むといいかも。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/bundle.b00a9f3a29b791781cc5.js?7490b7329f7ad1443141"></script></body>
</html>copy-webpack-plugin
本番環境にデプロイして、いざ動作確認してみたら、 react-router使ってるせいで、404出ちゃったとかありませんか。
そしたら、apacheの設定ファイル置きたくなったり、sass用のリダイレクトファイルを public配下に設置したくなりますよね。 そいういう時にこれ使いました。 例 .htaccess, _redirects
import CopyWebpackPlugin from 'copy-webpack-plugin';
// 〜略〜
plugins: [
new CopyWebpackPlugin([
{ from: { glob: './src/static/**', dot: true }, to: '[name].[ext]' },
]),Google Analytics
react-router使ってたら、画面遷移時にアナリティクスに取れなくなるのでこれを導入
インストール方法
npm i -S react-ga
設定
import React from 'react';
import ReactDOM from 'react-dom';
import ReactGA from 'react-ga';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from '../containers/App';window.React = React;
ReactGA.initialize('UA-123456-7');const logPageView = () => {
ReactGA.set({ page: window.location.pathname });
ReactGA.pageview(window.location.pathname);
};ReactDOM.render((
<Router history={browserHistory} onUpdate={logPageView}>
<Route path="/">
<IndexRoute component={App} />
<Route path="/:userName" component={App} />
</Route>
</Router>
), document.getElementById('root'));
所管
あとやり残してることあるかな。気が付いたら追記する。
