使用Webpack和Babel来搭建React应用程序

用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]
}

参考：http://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/