webpack是如何打包react的?

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

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 
                 <p> 看看有没有内容</P>
      }
}
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文件

<!DOCTYPE html>
<html>
<head>
         <meta charset="UTF-8">
         <title>Title</title>
 </head>
<body>
       <script type="text/javascript" src="./lib/common.js" charset="utf-8"></script>
       <script type="text/javascript" src="./lib/index.js charset="utf-8"></script>
</body>
</html>

9、双击运行index.html文件

更多web前端知识,请查阅 HTML中文网 !

以上就是webpack是如何打包react的?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏