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