您的位置：首页 > Web前端 > React

使用Webpack构建React应用

2016-06-11 17:33 906 查看
前面写过一遍《使用gulp+Browserify构建React应用》，本文来看看更强大的构建工具— —Webpack。先来看看webpack强大之处介绍

1、将css、图片以及其他资源打包到同一个包中

2、在打包之前对文件进行预处理(less、coffee、jsx等)

3、 根据入口文件的不同把你的包拆分成多个包

4、支持开发环境的特殊标志位

5、支持模块代码“热”替换

6、支持异步加载

  Webpack不仅帮助你打包所有的Javascript文件，还拥有其他应用需要的资源。这样设计可以让你能创建一个自动包含所有类型依赖的组件。由于可以自动包含所有的依赖，组件也变得更加方便移植。更妙的是，随着应用不断地开发并修改，当你移除某个组件的时候，它的所有依赖也会自动被移除。这意味这不会再有未被使用的css或图片遗留在代码目录中。

  本文主要是编写一个React开发的webpack构建包基础框架，后续编写React简单小例子，构建吧命令、index.html均无需改变，只需要关注./app/jsx目录中编写组件的jsx代码即可。

源码地址：https://github.com/mqy1023/react-basejs/tree/master/src/dev-base/webpack

一、React项目结构

/app
/jsx
index.html
package.json
webpack.config.js
.babelrc


二、webpack脚本

1、创建package.json管理node包信息文件：
npm init;


2、package.json中scripts脚本

"scripts": {
"start": "webpack-dev-server",//执行`npm start` 相当于执行`webpack-dev-server`命令启动服务器
"prod": "webpack -p"//执行`npm run prod` 相当于执行`webpack -p`打包命令
}


3、
react
相关库

npm install react --save;//react核心库
npm install react-dom --save;//react操作dom库


4、
Babel
- -编译JSX

npm install --save-dev babel-core;//babel核心
npm install --save-dev babel-loader;    //webpack中babel编译器
npm install --save-dev babel-preset-react;  //react的JSX编译成js


5、
html-webpack-plugin
- - 修改html文件插件

npm install --save-dev html-webpack-plugin
;

6、
webpack
相关库

全局安装webpack：
npm install webpack -g


npm install --save-dev webpack; //webpack核心
npm install --save-dev webpack-dev-server;  //webpack服务器


7、
.babelrc
- - 设置webpack的loader加载器(babel编译器)规则

{
"presets": [
"react"
]
}


8、
webpack.config.js
- - webpack配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html', //指定html模板目录路径
filename: 'index.html',    //新建文件名
inject: 'body' //<script>[output的filename(index_bundle.js)]</script>查到body中,另可插head
});

module.exports = {
entry: [
'./app/js/App.jsx'    //App.js是主入口jsx
],
output: {  //指定输出目录和输出文件名index_bundle.js
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [ //正则：以jsx结尾；排除node_modules目录；babel加载器
{test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
plugins: [HTMLWebpackPluginConfig]
};


三、网页index.html

./app/index.html
//html最轻量化，<script>都没有。
//webpack配置中html-webpack-plugin插件自动插入转换并拼接后的js到<script>中


四、在./app/jsx目录下编写React的jsx

其中模块化管理jsx，只需要在webpack.config.js的entry配置指定入口的App.jsx

五、使用

1、npm install

2、构建命令

webpack     //执行一次开发时的编译
webpack -p      //执行一次生成环境的编译（压缩）
webpack -w  //在开发时持续监控增量编译（很快）

//因为在package.json配置了script
npm start //相当于执行`webpack-dev-server`命令启动服务器
npm run prod //相当于执行`webpack -p`打包命令


总结

index.html文件和webpack构建包命令不变，每次开发React时，

只需要在./app/jsx目录下编写React组件的jsx代码，主入口jsx为
App.jsx
即可
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航