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

修飾發表於2018-05-13
ReactWeb架構

一、初始化專案

   $ 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

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

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


三、配置webpack及編寫專案

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

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

    編寫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"複製程式碼

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

四、啟動專案

$ npm start 

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

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

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

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

訪問http://localhost:9000/

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

驗證熱更新: 

在IndexComponent.js元件中更改div元素內的值，伺服器會自動編譯，瀏覽器自動重新整理


五、總結

1. react和react-dom是react專案的基礎

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

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


相關文章