add vendor.js, change webpack to 1.13.2

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "react",
+    "es2015-loose",
+    "stage-1"
+  ],
+  "plugins": [
+    "transform-runtime"
+  ]
+}

.gitignore

@@ -4,3 +4,4 @@
 build
 node_modules
 npm-debug.log
+debug.log

README.md

@@ -57,6 +57,13 @@ $ npm start             # Build and launch the app, same as "node tools/start.js
 
 **NODE**: Make sure that you have [Node.js](https://nodejs.org/) v6 installed on your local machine.
 
+### IE8 Support Version
+
+&nbsp; &nbsp; react <= 0.14.8<br>
+&nbsp; &nbsp; react-dom <= 0.14.8<br>
+&nbsp; &nbsp; react-router <= 2.3.0<br>
+&nbsp; &nbsp; webpack <= 1.13.2  [IE8 下访问webpack.UglifyJsPlugin 压缩的代码出错](https://github.com/SamHwang1990/blog/issues/6)<br>
+
 ### How to Test
 
 The unit tests are powered by [chai](http://chaijs.com/) and [mocha](http://mochajs.org/).
@@ -69,7 +76,7 @@ $ npm test
 ### How to Build
 
 ```shell
-$ npm run build release         # Build production release 
+$ npm run build         # Build production release 
 ```
 
 

package.json

@@ -1,5 +1,5 @@
 {
-  "private": true,
+  "name": "react-static-boilerplate",
   "engines": {
     "node": ">=5.0",
     "npm": ">=3.3"
@@ -10,6 +10,9 @@
     "babel-core": "^6.9.0",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
+    "babel-plugin-transform-es3-modules-literals": "0.0.3",
+    "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babel-plugin-transform-react-constant-elements": "^6.8.0",
     "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.2.7",
@@ -60,7 +63,7 @@
     "postcss-selector-not": "^2.0.0",
     "react": "^0.14.8",
     "react-dom": "^0.14.8",
-    "react-hot-loader": "^3.0.0-beta.2",
+    "react-hot-loader": "^3.0.0-beta.6",
     "react-redux": "^4.4.5",
     "react-router": "2.3.0",
     "react-router-redux": "^4.0.5",
@@ -71,20 +74,10 @@
     "stylelint": "^6.4.1",
     "stylelint-config-standard": "^7.0.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.0",
+    "webpack": "1.13.2",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0"
   },
-  "babel": {
-    "presets": [
-      "react",
-      "es2015",
-      "stage-1"
-    ],
-    "plugins": [
-      "transform-runtime"
-    ]
-  },
   "eslintConfig": {
     "parser": "babel-eslint",
     "extends": "airbnb"

src/main.js

@@ -9,7 +9,9 @@ import AppContainer from './containers/AppContainer'
 // ========================================================
 // Browser History Setup
 // ========================================================
-const browserHistory = useRouterHistory(createBrowserHistory)()
+const browserHistory = useRouterHistory(createBrowserHistory)({
+  basename: __BASENAME__
+})
 
 // ========================================================
 // Store and History Instantiation
@@ -54,21 +56,33 @@ let render = (routerKey = null) => {
 
 // Enable HMR and catch runtime errors in RedBox
 // This code is excluded from production bundle
-if (__DEV__ && module.hot) {
-  const renderApp = render
-  const renderError = (error) => {
-    const RedBox = require('redbox-react')
+if (__DEV__) {
+  if (module.hot) {
+    // Development render functions
+    const renderApp = render
+    const renderError = (error) => {
+      const RedBox = require('redbox-react').default
 
-    ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
-  }
-  render = () => {
-    try {
-      renderApp(Math.random())
-    } catch (error) {
-      renderError(error)
+      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
     }
+
+    // Wrap render in try/catch
+    render = () => {
+      try {
+        renderApp()
+      } catch (error) {
+        renderError(error)
+      }
+    }
+
+    // Setup hot module replacement
+    module.hot.accept('./routes/index', () =>
+      setImmediate(() => {
+        ReactDOM.unmountComponentAtNode(MOUNT_NODE)
+        render()
+      })
+    )
   }
-  module.hot.accept(['./routes/index'], () => render())
 }
 
 // ========================================================

src/static/index.html

@@ -11,6 +11,7 @@
   </head>
   <body>
     <div id="container"></div>
-    <script src="assets/bundle.js"></script>
+    <script src="/assets/vendor.js"></script>
+    <script src="/assets/app.js"></script>
   </body>
 </html>

tools/start.js

@@ -18,7 +18,7 @@ const config = require('./webpack.config');
 task('start', () => new Promise(resolve => {
   // Hot Module Replacement (HMR) + React Hot Reload
   if (config.debug) {
-    config.entry.unshift('react-hot-loader/patch', 'webpack-hot-middleware/client');
+    config.entry.vendor.unshift('react-hot-loader/patch', 'webpack-hot-middleware/client');
     config.module.loaders.find(x => x.loader === 'babel-loader')
       .query.plugins.unshift('react-hot-loader/babel');
     config.plugins.push(new webpack.HotModuleReplacementPlugin());

tools/webpack.config.js

@@ -35,21 +35,26 @@ const config = {
   context: path.resolve(__dirname, '../src'),
 
   // The entry point for the bundle
-  entry: [
-    'es5-shim',
-    'es5-shim/es5-sham',
-    'babel-polyfill',
-    'es6-promise',
-    'fetch-detector',
-    'fetch-ie8',
-    './main.js'
-  ],
+  entry: {
+    app: [
+      'babel-polyfill',
+      './main.js'
+    ],
+    vendor: [
+      'es5-shim',
+      'es5-shim/es5-sham',
+      'es6-promise',
+      'fetch-detector',
+      'fetch-ie8',
+    ]
+  },
 
   // Options affecting the output of the compilation
   output: {
-    path: path.resolve(__dirname, '../build/assets'),
-    publicPath: '/assets/',
-    file: 'build/[name].js',
+    path: path.resolve(__dirname, '../build'),
+    publicPath: '/',
+    filename: 'assets/[name].js',
+    chunkFilename: 'assets/[name].js',
     sourcePrefix: '  ',
   },
 
@@ -77,9 +82,14 @@ const config = {
   // The list of plugins for Webpack compiler
   plugins: [
     new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "vendor",
+      minChunks: Infinity,
+    }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
       __DEV__: DEBUG,
+      __BASENAME__: JSON.stringify(process.env.BASENAME || '')
     }),
   ],
 
@@ -109,6 +119,9 @@ const config = {
               'transform-react-remove-prop-types',
               'transform-react-constant-elements',
               'transform-react-inline-elements',
+              'transform-es3-modules-literals',
+              'transform-es3-member-expression-literals',
+              'transform-es3-property-literals'
             ],
           ],
         },
@@ -145,7 +158,7 @@ const config = {
         test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
         loader: 'url-loader',
         query: {
-          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
+          name: DEBUG ? 'assets/[path][name].[ext]?[hash]' : '[hash].[ext]',
           limit: 10000,
         },
       },
@@ -153,7 +166,7 @@ const config = {
         test: /\.(eot|ttf|wav|mp3)$/,
         loader: 'file-loader',
         query: {
-          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
+          name: DEBUG ? 'assets/[path][name].[ext]?[hash]' : '[hash].[ext]',
         },
       },
     ]