快捷導(dǎo)航

webpack手動配置React開發(fā)環(huán)境的步驟

更新時間：2018年07月02日 10:26:17 作者：木子昭

本篇文章主要介紹了webpack手動配置React開發(fā)環(huán)境的步驟，webpack手動配置一個獨立的React開發(fā)環(huán)境, 開發(fā)環(huán)境完成后, 支持自動構(gòu)建, 自動刷新, sass語法等功能...感興趣的小伙伴們可以參考一下

React提供了create-react-app的快速構(gòu)建工具, 但作為一個專業(yè)的程序員(老司機(jī)), 面對復(fù)雜的項目, 入門級的構(gòu)建工具, 是遠(yuǎn)遠(yuǎn)不夠的, 我們這里從零開始, 用webpack, 手動配置一個獨立的React開發(fā)環(huán)境, 開發(fā)環(huán)境完成后, 支持自動構(gòu)建, 自動刷新, sass語法等功能...

1. 首先用npm初始化環(huán)境

mkdir react-webpack-demo
cd react-webpack-demo
npm init -y

安裝相關(guān)軟件包

npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D
# 識別html轉(zhuǎn)換為jsx語法
npm install babel-preset-react -D

2.添加對html靜態(tài)文件的支持

在根目錄下新建文件夾src, 在src內(nèi)加入index.html index.js
在根目錄下新建webpack.config.js
在webpack.config.js中加入如下配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 負(fù)責(zé)將html文檔虛擬到根目錄下
let htmlWebpackPlugin = new HtmlWebpackPlugin({
  // 虛擬的html文件名 index.html
  filename: 'index.html',
  // 虛擬html的模板為 src下的index.html
  template: path.resolve(__dirname, './src/index.html')
})

module.exports = {
  // 開發(fā)模式
  mode: 'development',
  // 配置入口文件
  entry: './src/index.js',
  // 出口文件目錄為根目錄下dist, 輸出的文件名為main
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  // 配置開發(fā)服務(wù)器, 并配置自動刷新
  devServer: {
    // 根目錄下dist為基本目錄
    contentBase: path.join(__dirname, 'dist'),
    // 自動壓縮代碼
    compress: true,
    // 服務(wù)端口為1208
    port: 1208,
    // 自動打開瀏覽器
    open: true
  },
  // 裝載虛擬目錄插件
  plugins: [htmlWebpackPlugin],
}

在package.json內(nèi)scripts中添加"dev": "webpack-dev-server"

在src/index.html中添加內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-webpack-demo</title>
</head>
<body>
  react-webpack-demo
  <hr>
  高堂明鏡悲白發(fā), 朝如青絲暮成雪
</body>
</html>

在命令行內(nèi)運(yùn)行npm run dev, 即可看到剛添加的index.html內(nèi)容

接下來我們配置babel對es6語法的支持, 以及對jsx語法的支持

3. 添加對js高級語法的支持

在項目根目錄, 添加.babelrc配置文件 presets為語法配置,plugins為插件配置

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

在webpack.config.js中添加module字段, 進(jìn)行插件loader配置

// webpack.config.js
module.exports = {
  ...
  // 配置loader
  module: {
    // 根據(jù)文件后綴匹配規(guī)則
    rules: [
      // 配置js/jsx語法解析
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};

在src/index.html中加入id為root的div節(jié)點

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react-webpack-demo</title>
</head>
<body>

  react-webpack-demo
  <hr>
  高堂明鏡悲白發(fā), 朝如青絲暮成雪
  <hr>
  <div id="root"></div>
</body>
</html>

在src/index.js中加入包含jsx語法的react組件

import React from 'react';
import ReactDOM from 'react-dom';


class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
    this.decrease = this.decrease.bind(this);
    this.increase = this.increase.bind(this);
  }
  // 加1
  increase() {
    let self = this;
    self.setState({ number: self.state.number + 1 })
  }
  // 減一
  decrease() {
    let self = this;
    self.setState({ number: self.state.number - 1 })

  }


  render() {
    return ( 
      <div>
        <input type = "button" value = "減1"onClick = { this.decrease }/> 
        <span> { this.state.number } </span>
        <input type = "button" value = "加1" onClick = { this.increase }/> 
      </div> )
  }
}

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

附錄: 添加對sass語法的支持(沒興趣可以跳過)

安裝sass相關(guān)的loader

npm install style-loader css-loader node-sass sass-loader -D

在webpack.config.js內(nèi)新增規(guī)則

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        "style-loader", // creates style nodes from JS strings
        "css-loader", // translates CSS into CommonJS
        "sass-loader" // compiles Sass to CSS
      ]
    }]
  }
};

在src內(nèi)新增index.scss

$designWidth: 750;
@function px2rem($px) {
 @return $px*10/$designWidth + rem;
}

#root {
  div {
    font-size: px2rem(500);
    display: flex;
    color: #64B587;
    input {
      flex: 1 1 auto;
    }
    span {
      flex: 1 1 auto;
      text-align: center;
    }
  }
}

在index.js中新增import index.scss

最終效果: