webpack+babel构建react目录

创建项目文件夹
npm init 初始化生成package.json文件
安装webpack 和babel-loader

npm install --save-dev webpack
webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack.config.js文件

const path = require('path')

module.exports = {
    entry:'./app/index.js',
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist'),
        publicPath:'temp/'  //缓存的中文件   页面可以自动更新
    },
    devServer:{
        contentBase:'./',
        host:'localhost',
        compress:true,
        port:1717
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loaders:"babel-loader",
                query:{  //支持es2015 和react
                    presets:['es2015','react']
                }
            },{
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
    ]
    }
}

package.json文件

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.20.2",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
  }
}