使用webpack动态加载javascript块并对路由器做出反应

Question

I have used react router and webpack to split code into shared.js, bundle.min.js, and 1.chunk.js with getComponents and require.ensure api for a page, say "/about", from "/" because I want to boost initial loading time for homepage. 我已经使用react router和webpack将代码分割成shared.js，bundle.min.js和1.chunk.js，其中getComponents和require.ensure api用于页面，比如“/ about”，来自“/”，因为我想要提高主页的初始加载时间。 It's working well in development setting if I put index.html and those js into single folder called public and declare scripts shared.js, bundle.min.js in html. 如果我将index.html和那些js放入名为public的单个文件夹并在html中声明脚本shared.js，bundle.min.js，它在开发设置中运行良好。

I am wondering how it is possible for javascript to load correct chunk if I intent to deploy all javascript files on CDN such as cloudfront. 我想知道如果我打算在CDN上部署所有javascript文件（如cloudfront），javascript如何加载正确的块。 I can simply puts CDN url in html for bundle.min.js and shared.js because those are required for any page. 我可以简单地将CDN url放在html中，用于bundle.min.js和shared.js，因为这些都是任何页面都需要的。 But how could I let it know 1.chunk.js CDN url when it needs it? 但是，如果需要，我怎么能让它知道1.chunk.js CDN网址？ Is there a thing like declarative mapping between bundled file name and actual url (like CDN url) in html? 在html中是否存在捆绑文件名和实际URL（如CDN url）之间的声明性映射？ Otherwise I don't see how can it load 1.chunk.js. 否则我看不出它如何加载1.chunk.js。

Basically my server reply index.html for all url requested like example.com or example.com/about. 基本上我的服务器回复index.html请求所有url，例如example.com或example.com/about。 And react router take care of everything else. 并且路由器会处理其他所有事情。

My html code is like: 我的HTML代码如下：

<html>
  <body>
    <div id="container"></div>
    <script src="http://xxxxCDN.net/common.js"></script>
    <script src="http://xxxxCDN.net/bundle.min.js"></script>
  </body>
</html>

and my routing file is: 我的路由文件是：

import Router, {Route, IndexRoute} from "react-router"
import React from 'react';
import App from "../components/App"
import HomePage from "../components/pages/HomePage"
import LoginPage from "../components/pages/LoginPage"
import SignupPage from "../components/pages/SignupPage"
//import AboutPage from "../components/pages/AboutPage"
import GuidePage from "../components/pages/GuidePage"
import SearchPage from '../components/pages/SearchPage'
import ProfilePage from '../components/pages/ProfilePage'
import HomeDetailPage from '../components/pages/HomeDetailPage'
import OrderDetailPage from "../components/pages/OrderDetailPage"

const routes = <Route path='/' component={App}>
  <IndexRoute component={HomePage}/>
  <Route path="login" component={LoginPage}/>
  <Route path="signup" component={SignupPage}/>
  <Route path="search" component={SearchPage}/>
  <Route path="guide" component={GuidePage}/>
  <Route path="about" getComponent={(location, cb) => {
    require.ensure([], (require) => {
      cb(null, require('../components/pages/AboutPage'))
    })
  }}/>
  <Route path="profile" component={ProfilePage}/>
  <Route path="home" component={HomeDetailPage}/>
  <Route path="order" component={OrderDetailPage}/>
</Route>;

export default routes;

and webpack config file for deployment: 和用于部署的webpack配置文件：

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/app.jsx'
  ],
  output: {
    path: './dist',
    filename: 'bundle.min.js',
    chunkFilename: '[id].chunk.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: JSON.stringify("production")
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
}

Answer 1

output.publicPath will do the job. output.publicPath将完成这项工作。

final configuration will become 最终配置将成为

module.exports = {
   .....,
   output: {
    path: './dist',
    filename: 'bundle.min.js',
    chunkFilename: '[id].chunk.js',
    publicPath: "http://xxxxCDN.net/"
  },
  .....
}

ref: https://webpack.github.io/docs/configuration.html#output-publicpath ref： https ： //webpack.github.io/docs/configuration.html#output-publicpath

使用webpack动态加载javascript块并对路由器做出反应

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-11-29 18:22:11

使用webpack动态加载javascript块并对路由器做出反应

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-11-29 18:22:11

解决方案1
2 已采纳 2015-11-29 18:22:11