webpack 打包 react

1、首先安装webpack命令

$ npm install webpack -g

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

$ npm 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文件

         

         

 

       

       

9、双击运行index.html文件