完成webpack設定後,在project裡新增source(src)存放目錄與distribution(dist)發佈目錄。src主要放置需編譯代碼,dist放置靜檔案或編譯後輸出的檔案。
src/Hello.js
import React, { Component } from 'react';
class Hello extends React.Component {
render() {
return <h1>Hello, webpack!</h1>;
}
}
export default Hello;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
ReactDOM.render(
<Hello />,
document.getElementById('app')
);
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react webpack</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
檔案結構
webpack打包
H:\frontproject\react-webpack>npm run build
> react-webpack@1.0.0 build H:\frontproject\react-webpack
> webpack
Hash: 08a3856d972d4e23f873
Version: webpack 3.10.0
Time: 1442ms
Asset Size Chunks Chunk Names
bundle.js 729 kB 0 [emitted] [big] main
[14] multi ./src/index.js 28 bytes {0} [built]
[15] ./src/index.js 476 bytes {0} [built]
[28] ./src/Hello.js 2.24 kB {0} [built]
+ 26 hidden modules
產出dist/bundle.js
啟動測試server
H:\frontproject\react-webpack>npm run dev
> react-webpack@1.0.0 dev H:\frontproject\react-webpack
> webpack-dev-server --devtool eval --progress --colors
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from H:\frontproject\react-webpack\dist
Hash: 40b1f1894ed386f61539
Version: webpack 3.10.0
Time: 1754ms
Asset Size Chunks Chunk Names
bundle.js 1.09 MB 0 [emitted] [big] main
[2] ./node_modules/react/index.js 190 bytes {0} [built]
[16] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
[17] (webpack)-dev-server/client?http://localhost:8080 7.63 kB {0} [built]
[18] ./node_modules/url/url.js 23.3 kB {0} [built]
[25] (webpack)-dev-server/node_modules/strip-ansi/index.js 150 bytes {0} [built]
[27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[28] (webpack)-dev-server/client/socket.js 1.06 kB {0} [built]
[30] (webpack)-dev-server/client/overlay.js 3.69 kB {0} [built]
[31] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[32] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[37] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/index.js 476 bytes {0} [built]
[43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
[52] ./src/Hello.js 2.24 kB {0} [built]
+ 38 hidden modules
webpack: Compiled successfully.
輸出畫面
react-webpack git
https://github.com/kwon44/react-webpack.git
參考資料:
webpack getting-started
https://webpack.js.org/guides/getting-started/