React项目实战【2】--webpack

项目的使用了一个模块化管理工具webpack ,用来实现模块的管理打包。

然后找了各种教程，各种安装bug 。最后翻墙到一篇，把基础的过程算是摸索了一遍。

点我查看原文地址【需要翻墙】

流程文章讲的很清楚，这里就不赘述了。

需要注意的是，原文中在执行代码
webpack-dev-server --progress --colors

之后，通过访问地址 http://localhost:8080/webpack-dev-server/ 可以进入页面，但是注意，此时文件目录中并未生成 bundle.js 文件。你需要先在npm 中 写入 webpack
而前者可以打开的原因是 ， webpack的 webpack-dev-server 是一个基于Node.js Express框架的开发服务器，它是一个静态资源Web服务器，对于简单静态页面或者仅依赖于独立服务的前端页面
在开发过程中，开发服务器会监听每一个文件的变化，进行实时打包，并且可以推送通知前端页面代码发生了变化，从而可以实现页面的自动刷新

---

由于webpack是项目起来的 基础，这里详细分析它的配置文件的每一行代码

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 模板文件处理

var OpenBrowserWebpackPlugin = require('open-browser-webpack-plugin');
 // 自动开启浏览器


module.exports = {
    entry: path.resolve('./route/index.js'), // 入口文件
    output: {
        path: './build',  // 出口文件目录
        filename: 'bundle.js' // 输出文件名称
    },
    devServer: {
        contentBase: './build', // 静态文件存放目录
        port: 8008, //  端口号
        inline: true  // 是否开启实时刷新浏览器功能
    },
    // 模块的加载处理
    module: {
    // 设置加载器是一个数组 
        loaders: [
            {   // 处理js或者jsx
                test: /\.jsx?$/,
                loader: 'babel',
                include: path.resolve('./route'),
                exclude: /node_modules/
            },
            {  // 处理css
                test:/\.css$/,
                loader:'style!css'
            },
            {  // 处理图像
                test:/\.(eot|svg|ttf|woff|woff2)/,
                loader:'url'
            }
        ]
    },
    plugins: [
     //用来在build目录下生成html文件
        new HtmlWebpackPlugin({
            template: './route/index.html'
        }),
        // //当打包成功之后自动打开浏览器显示url地址
        new OpenBrowserWebpackPlugin({
            url: 'http://localhost:8008'
        })
    ]
}

以上只是基本的配置

click other

---

1 对于css less sass

webpack 可以对less sass进行编译，所以你可以直接使用他们

click me to see more explain

2 react中使用了大量es6的规范来写
click me see that