自建最轻量的react+webpack+es6架构

一、初始化项目

$ mkdir my-app & cd my-app

$ npm install --yes

二、安装依赖库

# 必备react基础模块

$ npm install --save react react-dom

# 必备webpack基础模块,webpack4.x版本需安装webpack-cli, webpacke-dev-server开启服务器

$ npm install --save-dev webpack webpack-dev-server webpack-cli

# 支持ES6和JSX语法模块

$ npm install --save-dev babel-core babel-loader babel-preset-es2017 babel-preset-react

# 生成html文件和clean清理指定目录模块

$ npm install --save-dev html-webpack-plugin clean-webpack-plugin

# 解析css语法

$ npm install --save-dev css-loader style-loader

三、配置webpack及编写项目

根目录下新建webpack.config.js , index.html, src/index.js, src/App.js

编写webpack.config.js

const path = require('path');    #nodejs内置模块
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  mode: 'production',                                   # webpack4.x必须定义
  entry: path.resolve(__dirname, './src/index.js'),     # 入口文件
  output: {                                             # 出口文件
    path: path.resolve(__dirname, './dist'),
    filename: 'bunlde.js'
  },
  devServer: {                                          # 配置webpack-dev-server
    contentBase: path.join(__dirname, 'dist'),           
    compress: true,
    port: 9000
  },
  module: {                                            
    rules: [                                           # webpack4.x不再使用loaders
      {                                                # 改为rules + use
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: {
          loader: 'babel-loader',                       # 解析ES6语法
          options: {
            presets: ['es2017', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']               # webpack4.x的loader必须写全名
      }
    ]
  },
  plugins: [
    new cleanWebpackPlugin(['dist', 'build']),            # 执行npm satrt是自动删除dist和build目录
    new htmlWebpackPlugin({                               # 生成html文件
      template: './index.html'
    })
  ]
};

编写index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>        # 定义根节点
</body>
</html>

编写src/index.js 入口文件

import React from 'react'                    # 引入react模块
import ReactDOM from 'react-dom'             # 引入react-dom模块

import App from './App'                      # 引入当前目录的App.js, 必须使用./否则会去node_modules中查找, .js后缀可省略

ReactDOM.render(                             # 虚拟DOM渲染到真实DOM <div id="root"></div>节点上
  <App/>,
  document.getElementById('root')
);

编写src/App.js 首个react组件

import React, {Component} from 'react';
import IndexComponent from './components/IndexComponent';   # 引入自建组件

# ES6语法创建组件, 并对外暴露接口export default
export default class App extends Component {
  render() {
    return (
      <IndexComponent/>
    )
  }
};

src目录下新建components/IndexComponent.js, components/index.css

import React, {Component} from 'react'
import './index.css'

# 使用JSX语法编写组件
export default class IndexComponent extends Component {
  render() {
    return (
      <div>
        <h2>首页</h2>
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">博客</a></li>
          <li><a href="">生活</a></li>
        </ul>
      </div>
    )
  }
};

# IndexComponent组件的css样式
body, html {
    font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    font-size: 14px;
    background-color: tomato;
    padding: 0;
    margin: 0;
}

ul, ol,li {
    list-style-type: none;
}

a {
    text-decoration: darkcyan;
}

添加package.json的script脚本

"start": "webpack-dev-server --color --progress --watch --open --mode development",
"build": "webpack --colors --progress --mode production"

四、启动项目

$ npm start

编译后控制台如下图 Compiled successfully表示编译成功

此时会自动打开浏览器(因为package.json的script中配置了start的--open项)

访问http://localhost:9000/

验证热更新:

在IndexComponent.js组件中更改div元素内的值，服务器会自动编译，浏览器自动刷新

五、总结

1. react和react-dom是react项目的基础

2. webpack4.x后版本在配置上有些改变如: rules, use

3. 注意样式的loader顺序, use: ['style-loader', 'css-loader'], 反过来的话会报错