安裝所需

 npm install -g web pack
 nom install -g babel

以上兩個(gè)需要全局安裝，其他可以使用npm install 或自定義安裝

1.npm install (具體內(nèi)容如下，可以覆蓋package.json),

{
  "name": "longhu",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js&webpack --display-error-details -w",
    "dev": "webpack --display-error-details -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "imagemin-webpack-plugin": "^1.5.0-beta.0",
    "jsx-loader": "^0.13.2",
    "less-loader": "^4.0.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.5",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.7.1"
  }
}

2.webpack.config.js配置如下

• 在實(shí)踐中發(fā)現(xiàn)【publicPath】為chunkFilename的加載路徑，如果不指定則默認(rèn)為根目錄下，比較坑爹
• 【chunkFilename】是用來(lái)配合require.ensure的
• 【require.ensure】 參數(shù)1[ ] ,參數(shù)2、callback函數(shù)，在ballback函數(shù)參數(shù)里的require用來(lái)加載異步j(luò)s具體看下面main.js內(nèi)容。
• 【CommonsChunkPlugin】 是引用的webapck控件自帶分割chunk，作用是提取公共組件，防止重復(fù)加載。

var path = require("path");
var webapck = require("webpack");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); //thunk
var compress = require("webpack/lib/optimize/UglifyJsPlugin"); //壓縮
var DedupePlugin = require("webpack/lib/optimize/DedupePlugin"); //多文件
var ImageminPlugin = require('imagemin-webpack-plugin').default;//圖片壓縮
var config = {
    entry: {
        main: path.join(__dirname, '/content/script/es6/main.js'),
    },
    output: {
        path: path.join(__dirname, '/content/script/dist/script/'),
        filename: "[name].js",
        publicPath:'./content/script/dist/script/',////此處決定了chunkFilename要加載的路徑，此處為坑
        chunkFilename: 'chunk-[name].js'//文件拆分chunk
    },
    module: {
        //加載器配置
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit: 8192
                  }
            },
            {
                test: /\.js$/,
                loaders: ['babel-loader?presets[]=es2015,presets[]=react'],
                exclude: /node_modules/
              
            }
        ]
    },
     plugins: [
        new CommonsChunkPlugin({
            name: "chunk"
        }),
          new compress({  //壓縮代碼
            output: {
                comments: false,  // remove all comments
              },
              compress: {
                warnings: false
              }
        }), 
        new DedupePlugin({
            'process.env': {NODE_ENV: '"production"'}
        }),
        new ImageminPlugin({
            disable: process.env.NODE_ENV !== 'production', // Disable during development 
            pngquant: {
              quality: '95-100'
            }
          })
    ] 
}
module.exports = config;

3 .main.js 配置路由，在引入路由時(shí)有坑，require('./app').default
因?yàn)槟J(rèn)輸入為default所以必須后綴default

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from "react-router";
/* import APP from "./app.js"; */

var rootRout = {
  path: '/',
  getComponent: function (next, callback) {
    require.ensure([], function (require) {
      var app =  require('./app.js')
      callback(null, app.default);
    },"app")
  }
}
ReactDOM.render((
  <Router history={hashHistory} routes={rootRout}>
  </Router>
), document.querySelector("#FloatMenu"))

4. app.js 路由模塊

import React from 'react';
import ReactDOM from 'react-dom';

class APP extends React.Component{
    constructor(arg){ super(arg)}
    componentWillMount(){
        console.log("======")
    }
    render(){
        var test = "test1"
        return <div>{test}</div>
    }

}

export default APP;

4、webpac-dev-server

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: false,
    historyApiFallback: false
}).listen(5001, 'localhost', function (err, result) {
    var c = require('child_process');
        c.exec('start http://localhost:5001');
        if (err) {
            console.log(err);
        }
       // console.log('Listening at localhost:5000');
    });