使用webpack搭建一个react项目目录

1.npm i webpack webpack-cli webpack-dev-server -g  全局安装webpack webpack-cli webpack-dev-server

2.npm init初始化项目，创建package.json文件

3.创建项目目录：
build文件夹=>webpack.base.config.js/webpack.dev.config.js 按照不同开发环境定义的项目webpack配置
src文件夹=>actions文件夹（redux的各actions文件）、reducers文件夹（redux的各reducers文件）、components文件夹（各公共小组件文件夹）、
containers文件夹（各页面总组件文件夹）、index.html（项目页面）、main.js（项目入口文件、react根文件）

4.npm i react react-dom react-router-dom --save-dev 安装react依赖,此时可以先写好入口文件main.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 组件（页面）
import Layout from './containers/Layout';

class App extends Component {
    constructor(props){
        super(props)
    }
    render(){
      return (
        <div>
          第一页
        </div>
      )
    }
}

ReactDOM.render(<App/>,document.getElementById('root'));

5.npm i sass-loader style-loader css-loader file-loader url-loader babel-loader --save-dev 安装loader依赖

//webpack.base.config.js
HtmlWebpackPlugin = require('html-webpack-plugin');
webpack = require('webpack');
path = require('path');

config = {
  entry: './src/main.js', //入口文件，webpack4.x中打包默认找src/main.js作为默认入口
  output: {
    path: path.resolve(__dirname, '../dist'), //打包后dist文件夹位置
    filename: 'js/[name].min.js', //[name]与入口文件名一样
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
        }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
        }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
        }]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader?cacheDirectory',
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      enterName: 'index',
      filename: 'index.html',
      template: './src/index.html',
    }),
  ],
}


module.exports = config

//webpack.dev.config.js
const base = require('./webpack.base.config');

module.exports = Object.assign({},base,{
    mode: 'development',
    devServer: {
        inline: true,
        port: 8009
    },
    plugins: [
        ...base.plugins,
    ]
})

6.npm i @babel/core @babel/cli @babel/preset-env babel-preset-react-app --save-dev 安装babel依赖
注意坑：babel-loader7版本需要7版本babel-core，但是babel-core@7会下载失败报错，
所以需要下载babel-loader8版本，配合使用@babel/cli7版本以及@babel/core7版本

//package.json
{
  "name": "rea-mobile",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=build/webpack.dev.config.js",
    "dev": "webpack-dev-server --config=build/webpack.dev.config.js --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/preset-env": "^7.3.4",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react-app": "^7.0.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-router-dom": "^4.3.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

7.配置webpack.base.config.js入口、出口、规则、插件,devServer热更新添加inline:true实时更新
8.使用命令行type NUL > .babelrc添加.babelrc文件 内容：{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": []
}
9.package.json配置dev和build命令
"build": "webpack --config=build/webpack.dev.config.js"  打包操作
"dev":"webpack-dev-server --config=build/webpack.dev.config.js --open"  //运行操作

10.使用npm run dev 运行

11.打包后需修改dist内index.html中main.min.js路径配设置