如何修復require.ensure錯誤Webpack，Babel6，React？

Question

我試圖使用require.ensure為Facility.js創建一個塊

import React, { Component } from 'react';
import { render } from 'react-dom';
class Facility extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
              ....
        };
    }
    render() {
        return (
            <div>
                      ....
            </div>
        );
    }
}

export default Facility;
//Tried module.exports = Facility;

NonPatientSer.js

var Facility;
require.ensure([], function(require) { Facility = require('./Facility'); }, 'facility');

開發人員，我可以在源代碼中看到facility.bundle.js，但對其的調用返回未定義的錯誤

警告：React.createElement：type不能為null，undefined，boolean或number。 它應該是一個字符串（對於DOM元素）或一個ReactClass（對於復合組件）。 檢查NonPatientSer的渲染方法

和

未捕獲的不變違反：元素類型無效：預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 檢查NonPatientSer的渲染方法。

生產 （運行構建）

不允許加載本地資源：file：/// C：/Users/.../facility.bundle.js

Webpack配置

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:  __dirname + '/',
    chunkFilename: '[name].bundle.js'
  },

Answer 1

首先，您需要在webpack.config中修復publicPath屬性。 您應該使用：

publicPath:  '/dist/'

而是絕對路徑。

第二，如果對導出模塊使用es6語法：

export default Facility;

您應該這樣編寫導入代碼：

require.ensure([], function(require) {
  Facility = require('./Facility').default;
  ReactDOM.render(<Facility/>, document.getElementById('app'));
}, 'facility');

或者只是使用commonjs語法：

module.exports = Facility;

接着

require.ensure([], function(require) {
  Facility = require('./Facility');
  ReactDOM.render(<Facility/>, document.getElementById('app'));
}, 'facility');

另請參閱： http : //www.2ality.com/2015/12/babel-commonjs.html

更新：您可以在條目js文件中設置publicPath。 例如：

entry.js

__webpack_public_path__ = '/publicPathToChunk/';

var chunk;
require.ensure([], function(require) { 
  chunk = require('./chunk'); 
}, 'chunk');

另外，您可以使用下一個技巧：

var bundleSrc = document.querySelector('[src*="bundle"]').getAttribute("src");
__webpack_public_path__ = bundleSrc.substr(0, bundleSrc.lastIndexOf("/") + 1);