Ngắt hoàn toàn mã bằng gói webpack, trình tải gói phản ứng-bộ định tuyến

Question

Chỉnh sửa2: Đã chỉnh sửa regex để khớp với đường dẫn tệp của cửa sổ và quá trình tách mã hiện đang diễn ra. Nhưng các thành phần con của tôi cho tuyến đường gốc của tôi vẫn không tải được.

Chỉnh sửa: Mã của tôi đã thay đổi kể từ tuần trước, nhưng tôi vẫn gặp vấn đề đó (và tôi cần khai báo tuyến của mình theo cách khai báo, vì vậy hãy sử dụng JSX).

Trước hết, tôi đang sử dụng Webpack 1.x với React, bộ phản ứng-bộ định tuyến, trình tải gói, Babel6, ES6 và airbnb-eslint-config.

Tôi đã thử theo dõi Henley Edition's article về các đoạn tách và tải mã (với số example repo), dựa trên React's huge app example.

Nhưng tôi không thể quản lý để làm bundle-loader chia mã của tôi vào khối ...

Dưới đây là mã của tôi:

webpack.config.js

const webpack = require('webpack'); 
const path = require('path'); 

const nodeDir = `${__dirname}/node_modules`; 

const routeComponentRegex = /src[\/\\]views[\/\\]([^\/\\]+)[\/\\]js[\/\\]([^\/\\]+).js$/; 
const paths = [ // Only to test which files match the regex, juste in case 
    'src/views/index/js/Index.js', 
    'src/views/login-page/js/LoginForm.js', 
    'src/common/main-content/js/MainContent.js', 
    'src/routes/main.js', 
]; 

console.log(routeComponentRegex.test(paths[0])); // prints 'true' 
console.log(routeComponentRegex.test(paths[1])); // prints 'true' 
console.log(routeComponentRegex.test(paths[2])); // prints 'false' 
console.log(routeComponentRegex.test(paths[3])); // prints 'false' 

const config = { 
    resolve: { 
    alias: { 
     react: `${nodeDir}/react`, 
     'react-dom': `${nodeDir}/react-dom`, 
     'react-router': `${nodeDir}/react-router`, 
     'react-fetch': `${nodeDir}/react-fetch`, 
     'react-cookie': `${nodeDir}/react-cookie`, 
     'react-bootstrap': `${nodeDir}/react-bootstrap`, 
     'react-bootstrap-daterangepicker': `${nodeDir}/react-bootstrap-daterangepicker`, 
     'react-bootstrap-datetimepicker': `${nodeDir}/react-bootstrap-datetimepicker`, 
     velocity: `${nodeDir}/velocity-animate`, 
     moment: `${nodeDir}/moment`, 
     slimscroll: `${nodeDir}/slimscroll`, 
    }, 
    }, 
    entry: { 
    app: './client/src/routes/js/main', 
    vendors: [ 
     'react', 'react-dom', 
     'react-router', 'react-fetch', 'react-cookie', 
     'react-bootstrap', 'react-bootstrap-daterangepicker', 'react-bootstrap-datetimepicker', 
     'velocity', 'moment', 'slimscroll', 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'public/dist'), 
    publicPath: '/dist/', 
    filename: 'bundles/[name].bundle.js', 
    chunkFilename: 'chunks/[name].chunk.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'client'), 
     exclude: routeComponentRegex, 
     loader: 'babel', 
     }, 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'client'), 
     exclude: routeComponentRegex, 
     loader: 'style!css-loader?modules&importLoaders=1' + 
     '&localIdentName=[name]__[local]___[hash:base64:5]', 
     }, 
     { 
     test: routeComponentRegex, 
     include: path.join(__dirname, 'client'), 
     loaders: ['bundle?lazy', 'babel'], 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('vendors', 'bundles/vendors.js', Infinity), 
    ], 
}; 

module.exports = config; 

khách hàng/src/views/main-content/js/MainContent.js

import React from 'react'; 
import { Link } from 'react-router'; 

const MainContent = (props) => (
    <div> 
     <h1>App</h1> 
     <ul> 
     <li><Link to="/login">Login</Link></li> 
     </ul> 
     {props.children} 
    </div> 
); 

MainContent.propTypes = { 
    children: React.PropTypes.node.isRequired, 
}; 

export default MainContent; 

công cộng/src/views/index/js/Index.js

import React from 'react'; 

const Index =() => (
    <h2>Index Page</h2> 
); 

export default Index; 

công cộng/src/views/đăng nhập/js/Login.js

import React from 'react'; 

const LoginForm =() => (
    <div className="box box-default"> 
    <h2>Login Page</h2> 
    </div> 
); 

export default LoginForm; 

điểm nhập cảnh (client/src/routes/main.js):

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

import MainContent from '../../common/main-content/js/MainContent'; 

// modules supposed to be loaded lazily 
import Index from '../../views/index/js/Index'; 
import Login from '../../views/login/js/Login'; 
import ShortOffers from '../../views/short-offers/js/ShortOffers'; 
import CreateJobOffer from '../../views/create-job-offer/js/CreateJobOffer'; 

function lazyLoadComponent(lazyModule) { 
    return (location, cb) => { 
    lazyModule(module => { 
     cb(null, module); 
    }); 
    }; 
} 

function lazyLoadComponents(lazyModules) { 
    return (location, cb) => { 
    const moduleKeys = Object.keys(lazyModules); 
    const promises = moduleKeys.map(key => 
     new Promise(resolve => lazyModules[key](resolve)) 
    ); 

    Promise.all(promises).then(modules => { 
     cb(null, modules.reduce((obj, module, i) => { 
     obj[moduleKeys[i]] = module; 
     return obj; 
     }, {})); 
    }); 
    }; 
} 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={MainContent}> 
     <IndexRoute getComponent={lazyLoadComponent(Index)} /> 
     <Route path="short-offers" getComponent={lazyLoadComponent(ShortOffers)} /> 
     <Route path="create-job-offer" getComponent={lazyLoadComponent(CreateJobOffer)} /> 
    </Route> 
    <Route path="login" getComponent={lazyLoadComponent(Login)} /> 
    </Router> 
), document.getElementById('content')); 

Bây giờ webpack 's đầu ra:

Hash: a885854f956aa8d2a00c 
Version: webpack 1.13.0 
Time: 6321ms 
       Asset  Size Chunks    Chunk Names 
bundles/app.bundle.js 84.7 kB  0 [emitted] app 
    bundles/vendors.js 2.55 MB  1 [emitted] vendors 
chunk {0} bundles/app.bundle.js (app) 89 kB {1} [rendered] 
    [0] multi app 28 bytes {0} [built] 
    + 26 hidden modules 
chunk {1} bundles/vendors.js (vendors) 2.45 MB [rendered] 
    [0] multi vendors 148 bytes {1} [built] 
    + 626 hidden modules 

Xem, không bó :(Nếu tôi hiểu rõ, các bộ nạp thứ ba trong webpack.config.js nên chăm sóc các tập tin nhập khẩu trong các file .js và làm cho họ thành chunks, vì vậy họ có thể được tải dynamically (and lazily).

Ngoài ra, các trang của tôi không tải. Nếu tôi đưa ra mã tách ra khỏi hình ảnh, nó hoạt động:

render((
    <Router history={browserHistory}> 
    <Route path="/" component={MainContent}> 
     <IndexRoute component={Index} /> 
     <Route path="short-offers" getComponent={ShortOffers} /> 
     <Route path="create-job-offer" getComponent={CreateJobOffer} /> 
    </Route> 
    <Route path="login" getComponent={LoginPage} /> 
    </Router> 
), document.getElementById('content')); 

Nhưng, ứng dụng của tôi sẽ rất lớn và tôi hoàn toàn cần chia tách mã.

Có ai vui lòng có một thông tin chi tiết để cung cấp cho tôi không?

Cảm ơn trước!

Answer 1

Điều tác giả ở đây. Hãy thử chỉ chạy npm start (chạy máy chủ dev) hoặc webpack -c webpack.config.js (xuất tệp tới thư mục __build__). Tôi nghĩ rằng bạn chỉ cần quên điểm webpack tại tập tin cấu hình chính xác.

Answer 2

sử dụng module.exports thay vì export default

import React from 'react'; 
import { Link } from 'react-router'; 

const MainContent = (props) => (
    <div> 
     <h1>App</h1> 
     <ul> 
     <li><Link to="/login">Login</Link></li> 
     </ul> 
     {props.children} 
    </div> 
); 

MainContent.propTypes = { 
    children: React.PropTypes.node.isRequired, 
}; 

module.exports = MainContent; 

hoặc nó tốt hơn để sử dụng babel-plugin-add-module-exports Plugin nó sẽ làm thay đổi

// index.js 
export default 'foo' 

vào

'use strict'; 
Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
exports.default = 'foo';