用Webpack(npm install -g webpack)程式碼打包，Webpack大致需要知道三件事：

1)讓Webpack知道應用程式或js檔案的根目錄
2)讓Webpack知道做何種轉換
3)讓Webpack知道轉換後的檔案儲存在哪裡

具體來說，大致要做以下幾件事情：

1)在專案根目錄下有一個webpack.config.js檔案，這個是慣例
2)確保webpack.config.js能匯出一個物件

module.exports = {};

3)告訴Webpack入口js檔案在哪裡

module.exports = {
    entry: ['./app/index.js'
 
]
}

4)告訴Webpack需要哪些轉換外掛

module.exports = {
    entry: ['./app/index.js'],
    module: {
        loaders: []
    }
}

所有的轉換外掛放在loaders陣列中。

5)設定轉換外掛的細節

module.exports = {
    entry: ['./app/index.js'],
    module: {
        loaders: [
            {
                test: /\.coffee$/,
                include: __dirname + 'app'
 
,
                loader: "coffee-loader"
            }
        ]
    }
}

• test:執行.coffee結尾的檔案
• include:哪些檔案件
• loader：具體的轉換外掛

6)告訴Webpack匯出到哪裡

module.exports = {
    entry: ['./app/index.js'],
    module: {
        loaders: [
            {
                test: /\.coffee$/,
                include: __dirname + 'app'
 
,
                loader: "coffee-loader"
            }
        ]
    },
    output: {
        filename: "index_bundle.js",
        path: __dirname + '/dist'
    }
}

【檔案結構】

app/
.....components/
.....containers/
.....config/
.....utils/
.....index.js
.....index.html
dist/
.....index.html
.....index_bundle.js
package.json
webpack.config.js
.gitignore

我們不禁要問，如何保證app/index.html和dist/index.html同步呢？

如果，我們每次執行webpack命令後，把app/index.html拷貝到dist/index.html中就好了。

解決這個問題的人是：html-webpack-plugin(npm install --save-dev html-webpack-plugin)。

引入html-webpack-plugin之後，webpack.config.js看起來是這樣的：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: ['./app/index.js'],
    module: {
        loaders: [
            {
                test: /\.coffee$/,
                include: __dirname + 'app',
                loader: "coffee-loader"
            }
        ]
    },
    output: {
        filename: "index_bundle.js",
        path: __dirname + '/dist'
    },
    plugins: [HTMLWebpackPluginConfig]
}

• template: 表示原始檔來自
• filename:目標檔案的名稱
• inject: 'body'表示把對dist/index_bundle.js檔案的引用，放到目標檔案dist/index.html的body部分

【Webpack的一些指令】

webpack
webpack -w //監測檔案變化
webpack -p //不僅包括轉換，還包括最小化檔案

【Babel】

Babel可以用來把JSX檔案轉換成js檔案。與Babel相關的安裝包括：

npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-react

• babel-core: 就是babel本身
• babel-loader:用來載入
• babel-preset-react:用來完成JSX到JS的檔案轉換

在專案根資料夾下建立.babelrc檔案。

{
    "presets": ["react"]
}

把babel-loader放到webpack.config.js檔案的設定中去。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: ['./app/index.js'],
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: __dirname + 'app',
                loader: "babel-loader"
            }
        ]
    },
    output: {
        filename: "index_bundle.js",
        path: __dirname + '/dist'
    },
    plugins: [HTMLWebpackPluginConfig]
}