<23 - React 上陣 02> Webpack - Babel - React 聯手 - 撰寫多個元件並匯入至某個JS

2017鐵人賽 carlos chang webpack babel react

Carlos Chang

2016-12-23 00:13:58

2045 瀏覽

分享至

繼上一篇 <22 - React 上陣> Webpack - Babel - React 聯手，已經做好基本的安裝與設定，接下來要更進一步寫多個元件，然後 bundle 在同一個檔案。

該動手做啦，先建立兩個元件：

建立 `./react2.jsx` 和 `./react3.jsx`

於專案資料夾中建立 ./react2.jsx 和 ./react3.jsx，內容分別如下：

./react2.jsx：

import React from 'react';
import ReactDOM from 'react-dom';

class Hello1 extends React.Component {
  render() {
    return <div>This is Hello1!</div>;
  }
}

ReactDOM.render(<Hello1 />, document.getElementById('root1'));

./react3.jsx：

import React from 'react';
import ReactDOM from 'react-dom';

class Hello2 extends React.Component {
  render() {
    return <div>This is Hello2!</div>;
  }
}

ReactDOM.render(<Hello2 />, document.getElementById("root2"));

這兩個元件都非常單純，找到各自的id(root1 和 root2)，然後放入 render 的內容。

建立 `./component_collection.js`

於專案資料夾中，建立 ./component_collection.js，內容如下：

import "./react2.jsx";
import "./react3.jsx";

將 ./react2.jsx 及 ./react3.jsx 這兩個元件匯入至 ./component_collection.js 檔。

修改 `webpack.config.js`

增加以下 vendor_react 及 component_collection：

…
module.exports = {
  entry: {
    …
    vendor_react: ['react', 'react-dom'],
    component_collection: './app/component_collection.js'
  }
  …
}

以及將原來的：

plugins: [
  …
  new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor', 'manifest'] // Specify the common bundle's name.
  }),
  …
]

改成：

plugins: [
  …
  new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor', 'vendor_react', 'manifest'] // Specify the common bundle's name.
  }),
  …
]

因為 ./react2.jsx 和 ./react3.jsx 都有 import 同樣地 react 及 react-dom，所以透過 webpack.config.js 的修改，將它抽離出來，放至 vendor_react 中。

最後再執行 webpack 指令進行 bundle，即可完成。

執行 `webpack-dev-server --open` 看畫面

建立 ./index4.html，內容如下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack demo</title>
  </head>
  <body>
    <div id="root1"></div>
    <div id="root2"></div>
    <script src="dist/6ae23fc63e231edae941.manifest.js" type="text/javascript"></script>
    <script src="dist/874461a85b8830e77856.vendor_react.js" type="text/javascript"></script>
    <script src="dist/8fa85391c4d0ed36f29c.component_collection.js" type="text/javascript"></script>
  </body>
</html>

瀏覽 http://localhost:8080/index4.html，即可看到以下畫面：