DAY20:React Webpack say Hello(檔案結構、輸出)

2018 iT 邦幫忙鐵人賽

DAY 20

Modern Web

30天React從入門到入坑系列第 20 篇

2018鐵人賽

許小威

2018-01-08 14:40:51

2657 瀏覽

分享至

完成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.

輸出畫面