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