iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

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

檔案結構
https://ithelp.ithome.com.tw/upload/images/20180108/20107317zHAnywrgnA.png

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
https://ithelp.ithome.com.tw/upload/images/20180108/20107317QVED1Zq8PM.png

啟動測試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.	

輸出畫面
https://ithelp.ithome.com.tw/upload/images/20180108/20107317edBmTxntkZ.png

react-webpack git
https://github.com/kwon44/react-webpack.git

參考資料:
webpack getting-started
https://webpack.js.org/guides/getting-started/


上一篇
DAY19:React Webpack say Hello(設定檔)
下一篇
DAY21:React實作小專案(分析規劃)
系列文
30天React從入門到入坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言