Question

编辑2：编辑正则表达式以匹配窗口的文件路径，现在正在进行代码拆分。但是我的孩子组件到我的根路线仍然无法加载。

编辑：我的代码自上周以来发生了变化，但我仍然坚持这个问题（我需要以声明方式声明我的路由，所以使用JSX）。< / p>

首先，我使用Webpack 1.x与React，react-router，bundle-loader，Babel6，ES6和airbnb-eslint-config。

我尝试根据Henley Edition's article跟踪example repo关于代码拆分和加载块（及其React's huge app example）的内容。

但我无法让bundle-loader将我的代码拆分成块...

这是我的代码：

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;

的客户机/ SRC /视图/主内容/ 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;

公开/ SRC /视图/索引/ JS / Index.js

import React from 'react';

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

export default Index;

公开/ SRC /视图/登录/ JS / Login.js

import React from 'react';

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

export default LoginForm;

入口点（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'));

现在webpack的输出：

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

请参阅，没有捆绑:(如果我理解得很好，webpack.config.js中的第三个加载器应该处理在.js文件中导入的文件并将它们转换为chunks，这样就可以加载它们dynamically (and lazily) 1}}。

此外，我的网页无法加载。如果我从图片中取出代码分割，它可以工作：

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'));

但是，我的应用程序会很庞大，我绝对需要进行代码分割。

有人请有一个洞察力给我吗？

提前致谢！

Answer 1

文章作者在这里。尝试运行npm start（运行dev服务器）或webpack -c webpack.config.js（将文件输出到__build__目录）。我想你只是忘了将webpack指向正确的配置文件。

Answer 2

使用/etc/www/html代替Ngix

module.exports

或者最好使用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;

进入

babel-plugin-add-module-exports

使用webpack，bundle-loader react-router进行隐式代码分割

2 个答案: