HOME>WEBプログラム覚書>[Webpack][React]既存サイトにさっくりReactを導入するためのWebpack設定
[Webpack][React]既存サイトにさっくりReactを導入するためのWebpack設定
WordPressとかで構築されててViewに必要なデータは揃ってるしAPI作るのが面倒な場合。
やりたいことは、こんな感じでファイルごとに異なるJavascriptファイルを読み込む。Javascriptに引き渡す値はViewに書く。
front-page.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="App"></div>
</body>
<?php
$data = [
'title' => 'front-page.php',
'desc' => 'テキストボックスを変更するとタイトルが変わるよ'
];
?>
<script>
const data = <?php echo json_encode($data); ?>;
</script>
<script src="/js/front-page.bundle.js"></script>
</html>
archive.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="App"></div>
</body>
<?php
$data = [
'title' => 'archive.php',
'desc' => 'テキストボックスを変更するとタイトルが変わるよ'
];
?>
<script>
const data = <?php echo json_encode($data); ?>
</script>
<script src="/js/archive.bundle.js"></script>
</html>
node moduleのインストール
$ node -v
v8.9.1
$ npm -v
5.6.0
$ npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/cli @babel/preset-env @babel/preset-react react react-dom
package.json
2019年3月15日現在、各モジュールのバージョンは下記となる
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
スクリプトも追記しておく。
"scripts": {
"build": "webpack --mode=production",
"develop": "webpack --mode=development",
"watch": "webpack --mode=development --watch"
},
ディレクトリ、ファイル構成
最終的なディレクトリ、ファイル構成はこのようにする前提で。
develop
| archive.php
| front-page.php
|
+---js // ビルド後出来上がったjsファイル
| archive.bundle.js
| front-page.bundle.js
|
\---webpack
| package-lock.json
| package.json
| webpack.config.js
|
+---archive
| App.js
| index.js
|
\---front-page
App.js
index.js
webpack.conf
module.exports = {
devtool: 'inline-source-map',
mode: 'development',
entry: {
"front-page": './front-page/index.js',
"archive": './archive/index.js'
},
// ファイルの出力設定
output: {
// 出力ディレクトリ
// __dirnameは webpack.config.js があるディレクトリの絶対パス
path: __dirname + '/../js/',
// 出力ファイル名
// [name]はentryがハッシュの場合、keyで置換される
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
"presets": ["@babel/preset-env", "@babel/preset-react"]
},
}
}]
}
};
JSXファイル
ビルドの起点となるfront-page/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App data={data} />,
document.getElementById('App')
);
front-page/index.jsからimportされるApp.js
import React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = props.data;
}
onChangeTitle(e) {
this.setState({'title': e.target.value});
}
render() {
return <section className="hello-world">
<h1>{this.state.title}</h1>
<p>{this.props.data.desc}</p>
<input type="text" value={this.state.title} onChange={this.onChangeTitle.bind(this)} />
</section>
}
}
ビルド後はindex.jsとApp.jsが一つのファイルになったfront-page.bundle.jsができる。
archiveも同様にindex.htmlとApp.jsを作成し下記コマンドを打つ。
エラーが無ければOK
投稿日 |
2019年3月15日 04:16 |
カテゴリ |
JavaScript |
タグ |
React | webpack | 設定 |
トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1801 |
コメント