over 3 years ago

webpack.config.js 配置

module.exports = {
entry: {
    // 為主要起始頁面 js
    main: [
      './index.js'
    ],
    // 將常用的 Lib 配置到  vendor.bundle.js 檔案
    vendor: [
      'react', 'react-dom'
    ]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    // 動態建立的主要 js 如 main.bundle.js
    filename: "[name].bundle.js",
    // 動態建立的 chunk js 如 Login.chunk.js
    chunkFilename: "[name].chunk.js"
  },
  ....
  ..
  .
  plugins:[
    // 使用 CommonsChunkPlugin 將共用的模組整到 vendor.bundle.js 內
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js'
    }),
    // 壓縮醜化 js 檔案
    new webpack.optimize.UglifyJsPlugin({
          compressor: {
            warnings: false,
          },
    }),    
    // 使用 OccurenceOrderPlugin 減少文件大小
    new webpack.optimize.OccurenceOrderPlugin(),
    ...
    ..
    .
  ]
};

建立 pageRoutes.js

export default {
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        require.ensure([], (require) => {
          cb(null, require('Home/components/main').default)
        }, 'Home'); // 產生 Home.chunk.js
      }
    },
    {
      path: '/Login',
      getComponent(location, cb) {
        require.ensure([], (require) => {
          cb(null, require('./Login/components/main').default)
        }, 'Login'); // 產生 Login.chunk.js
      }
    },
    {
      path: '/UserManage',
      getComponent(location, cb) {
        require.ensure([], (require) => {
          cb(null, require('./UserManage/components/main').default)
        },'UserManage'); // 產生 UserManage.chunk.js
      }
    }
  ]
};

搭配 react-router 的 getComponent
使用 require.ensure 及 require 產生 chunk 檔案
載入路徑必須為 extends Component 內容
如其他檔案需 import Home 相關內容, 需個別 import
Home/components/main 路徑為 components 路徑
內容如下

import React, {Component} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';

class Main extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <ul>
          <li><Link to="/UserManage" >UserManage</Link></li>
      </ul>
    );
  }
}

export default Main;

主要 index.js 內容

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import store from 'store'
import { Router, Route, hashHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import PageRoutes from 'pageRoutes';

const history = syncHistoryWithStore(hashHistory, store)
let reactElement = document.getElementById('react')
render(
  <Provider store={store}>
    <Router history={history} routes={PageRoutes} />
  </Provider>,
  reactElement
);

主要搭配 react-redux 及 react-router 和 react-router-redux

編譯結果


最後於 index.html 引用 vendor.bundle.js 及 main.bundle.js 即可

← 使用 Webpack modulesDirectories 來消除相對路徑配置 使用 react-router 檢查路徑權限 →
 
comments powered by Disqus