react打包成html5,webpack是如何打包react的？

webpack是如何打包react的？下面本篇文章给大家介绍一下webpack 打包 react的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

webpack 打包 react

1、首先安装webpack命令npm install webpack -g

2、创建一个项目：项目名称 webpack，创建成功后cd 进入项目的根目录，该命令创建了整个项目的配置文件，package.jsonnpm init

3、添加webpack的依赖包"devDependencies": {

"jsx-loader": "^0.12.2",

"css-loader": "^0.15.0",

"style-loader": "^0.12.4",

"react-hot-loader": "^1.1.1",

"webpack": "^1.5.1",

"webpack-dev-server": "1.6.4"

},

这些包中的loader是对不同文件格式进行打包的支持。

4、安装依赖包npm install

5、新建相关文件和目录

根目录下新建一个src文件夹

在src文件夹中建立项目的入口文件：index.js//index.js

const React = require('react');

const ReactDom = require('react-dom');

const View = require('./content');

ReactDom.render(,document.body);

在index.js同根目录下，建立content.js来写react组件//content.js

const React = require('react');

class View extends React.Component{

render(){

return

看看有没有内容

}

}

module.exports = View;

6、配置webpack，在根目录下新建一个webpack.config.js，对webpack进行配置//webpack.config.js

var webpack = require('webpack');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

//插件项

plugins: [commonsPlugin],

//页面入口文件配置

entry: { index : './src/index.js' },

//入口文件输出配置

output: { path: './lib/', filename: '[name].js' },

module: {

//加载器配置

loaders: [ { test: /\.js$/, loader: 'jsx-loader?harmony' } ] },

//其它解决方案配置

resolve: {

extensions: ['', '.js', '.json', '.scss'],

alias: { AppStore : 'js/stores/AppStores.js',

ActionType : 'js/actions/ActionType.js',

AppAction : 'js/actions/AppAction.js' }

}

};

页面入口文件就是项目的入口文件，入口文件输出配置是对打包之后的文件的保存位置，这里放到了/lib/文件夹下，如果没有该文件夹，则自动创建

7、打包：webpack -w

如果上面的命令不带参数的话，则每修改一次文件，就要手动执行以下这个命令

打包完成之后项目的根目录就会出现一个lib的文件夹，文件夹里面有一个index.js，就是配置中的入口文件。path是输出路径，filename是输出名字，[name]是原名输出，也可以指定为一个固定的名字。

8、打包好之后，在根目录下新建index.html文件

Title

9、双击运行index.html文件

更多web前端知识，请查阅 HTML中文网 ！