自建最輕量的react+webpack+es6架構

時間 2019-11-06

標籤自建輕量 react+webpack+es6 react webpack 架構欄目 React 简体版

原文原文鏈接

1、初始化項目css

$ mkdir my-app & cd my-apphtml

$ npm install --yesnode

2、安裝依賴庫react

# 必備react基礎模塊
webpack

$ npm install --save react react-dom web

# 必備webpack基礎模塊,webpack4.x版本需安裝webpack-cli, webpacke-dev-server開啓服務器
npm

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

# 支持ES6和JSX語法模塊
瀏覽器

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

# 生成html文件和clean清理指定目錄模塊

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

# 解析css語法

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

3、配置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"複製代碼

4、啓動項目

$ npm start

編譯後控制檯以下圖 Compiled successfully表示編譯成功

此時會自動打開瀏覽器(由於package.json的script中配置了start的--open項)

訪問http://localhost:9000/

驗證熱更新:

在IndexComponent.js組件中更改div元素內的值，服務器會自動編譯，瀏覽器自動刷新

5、總結

1. react和react-dom是react項目的基礎

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

3. 注意樣式的loader順序, use: ['style-loader', 'css-loader'], 反過來的話會報錯

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。