摘要：可能在項(xiàng)目正式上線的時(shí)候才需要發(fā)布配置單文件入口版本新建一個(gè)和開發(fā)環(huán)境不同的是，入口和出口。相應(yīng)的在的源也要進(jìn)行修改。加載模塊發(fā)布配置多文件模式庫最好就不要打包進(jìn)來。因?yàn)橐话銕於际遣粫?huì)改動(dòng)的。所以這里就要進(jìn)行庫的分離。

時(shí)間：2016.3.19-12:29
作者：三月懶驢
基于：react版本：0.14
基于：babel版本：6
相關(guān)代碼：github

npm init

npm install webpack --save-dev

    - /app
        - main.js
        - component.js
    - /build
        - bundle.js （自動(dòng)生成）
        - index.html
    - webpack.config.js
    - package.json

var path = require("path");
module.exports = {
    entry:path.resolve(__dirname,"app/main.js"),
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"bundle.js"
    }
};

在package.json里面預(yù)設(shè)這個(gè)命令去啟動(dòng)打包功能

"build":"webpack"

//component.js
"use strict"
module.exports = function(){
    var a = "hello word"
    return a;
}

//main.js
"use strict"
var component = require("./component.js");
document.body.innnerHTML = component();

npm install webpack-dev-server --save-dev

在package.json里面配置webpack-dev-server

"dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
//webpack-dev-server 創(chuàng)建一個(gè)服務(wù)器8080端口的
//devtool eval --為你的代碼創(chuàng)建源地址，可以代碼快速定位
//progress --顯示進(jìn)度條
//colors --命令行帶顏色
//content-base build --指向設(shè)置的輸出目錄
//一旦啟動(dòng)這個(gè)就會(huì)用服務(wù)器去監(jiān)聽代碼文件的變化，從而每次變化都自動(dòng)合并

啟動(dòng)自動(dòng)刷新功能

//配置在webpack.config.js的入口
entry:[
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    path.resolve(__dirname,"app/main.js");
]

1. npm run dev 啟動(dòng)服務(wù)器
2. 打開瀏覽器－>http://localhost:8080
3. 修改一下前面的課堂練習(xí)時(shí)候?qū)懙拇a中的compnent.js的return的東西

//安裝react
npm install react --save
npm install react-dom --save
//安裝babel-loader
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev  //支持ES2015
npm install babel-preset-react --save-dev //支持jsx
npm install babel-preset-stage-0 --save-dev //支持ES7
//但是還不夠
npm install babel-polyfill --save
/*
Polyfilla是一個(gè)英國產(chǎn)品,在美國稱之為Spackling Paste(譯者注:刮墻的,在中國稱為膩?zhàn)?.記住這一點(diǎn)就行:把舊的瀏覽器想象成為一面有了裂縫的墻.這些[polyfills]會(huì)幫助我們把這面墻的裂縫抹平,還我們一個(gè)更好的光滑的墻壁(瀏覽器)
*/
npm install babel-runtime  --save
npm install babel-plugin-transform-runtime --save-dev
/*減少打包的時(shí)候重復(fù)代碼，以上要注意是放在dev還是非dev上！*/

配置babel

//在入口添加polyfill
entry[
    "babel-polyfill",
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    path.resolve(__dirname,"app/main.js")
]
//在webpack.config.js的module.exports = {}里面增加
module:{
    loaders:[{
        "loader":"babel-loader",
        exclude:[
            //在node_modules的文件不被babel理會(huì)
            path.resolve(__dirname,"node_modules"),
        ]，
        include:[
            //指定app這個(gè)文件里面的采用babel
            path.resolve(__dirname,"app"),
        ],
        test：/.jsx?$/,
        query:{
            plugins:["transform-runtime"],
            presets:["es2015","stage-0","react"]
        }
    }]
}

//component.js
"use strict"
import React from "react"
class Component extends React.Component{
    render(){
        return 
Helllo World
    }
}

//main.js
"use strict"
//注意！這里引入了新的東西
import "babel-polyfill"
import React from "react"
import {render} from "react-dom"
import Component from "./component"
let main = function(){
    render(,document.getElementById("main"));
}
main();

// 這里先留個(gè)坑！因?yàn)闀簳r(shí)來說還是認(rèn)為外鏈出來適合現(xiàn)在這個(gè)時(shí)代?？赡茉陧?xiàng)目正式上線的時(shí)候才需要

//新建一個(gè)webpack.production.config.js
//in package.json
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
//in webpack.production.config.js
//和開發(fā)環(huán)境不同的是，入口和出口。相應(yīng)的在HTML的JS源也要進(jìn)行修改。
var path = require("path")
var node_module_dir = path.resolve(__dirname,"node_module");
module.exports = {
    entry:[
        "babel-polyfill",
        path.resolve(__dirname,"app/main.js"),
    ],
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"app.js"
    },
    module:{
        loaders:[
            {
                loader:"babel-loader",   //加載babel模塊
                include:[
                    path.resolve(__dirname,"app"),
                ],
                exclude:[
                    node_module_dir
                ],
                test:/.jsx?$/,
                query:{
                    plugins:["transform-runtime"],
                    presets:["es2015","stage-0","react"]
                }
            },
        ]
    }
}

庫最好就不要打包進(jìn)來。因?yàn)橐话銕於际遣粫?huì)改動(dòng)的。所有用戶load一次就好了。所以這里就要進(jìn)行庫的分離。
依舊是：webpack.production.config.js

var path = require("path");
var webpack = require("webpack");
var node_module_dir = path.resolve(__dirname,"node_module");

module.exports = {
    entry:{
        app:[path.resolve(__dirname,"app/main.js"),],
        react: ["babel-polyfill","react","react-dom"]
    },
    output:{
        path:path.resolve(__dirname,"build"),
        filename:"app.js"
    },
    module:{
        loaders:[
            {
                loader:"babel-loader",   //加載babel模塊
                include:[
                    path.resolve(__dirname,"app"),
                ],
                exclude:[
                    node_module_dir
                ],
                test:/.jsx?$/,
                query:{
                    plugins:["transform-runtime"],
                    presets:["es2015","stage-0","react"]
                }
            },
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("react", "react.js")
      ]
}

預(yù)計(jì)學(xué)習(xí)搭建時(shí)間：1小時(shí)！
恭喜你！全部課程完成，接下來的話，我們就要開始react的課程了！本課程如果還有什么不懂的話，可以在評(píng)論中進(jìn)行討論。