# react-webpack-example

**Repository Path**: jyh133155/react-webpack-example

## Basic Information

- **Project Name**: react-webpack-example
- **Description**: react-webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-webpack
react-webpack
###react整合webpack###
# 第一步

把webpack安装成全局的

```
>npm --registry http://r.cnpmjs.org install webpack -g
```
#第二步

初始化package.json
```
	>npm init
```
#第三步

安装webpack和react等插件
```
>npm --registry http://r.cnpmjs.org i babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom webpack >webpack-dev-server  --save-dev
```
#第四步
根据需要搭建目录
#第五步
配置webpack的配置文件webpack.config.js文件
```
module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};
```
	根据具体的文件路径进行修改
#第六步
配置babel的配置文件.babelrc
先在根目录下面创建
然后配置babel的功能 react是翻译react的 es2015是把js文件转化成es5 js文件 可以参考http://babeljs.cn/docs/usage/babelrc/
```
{
  "presets": ["react", "es2015"]
}
```
#第七步
配置packa.json中的scripts 添加属性在下面   
```
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
```
等所有的文件都编辑完以后 就可以用npm start 开始项目
在浏览器中访问 http://localhost:8080/中访问页面
如果想修改端口号可以去/node_modules/webpack-dev-server/bin/webpack-dev-server.js这个文件中修改