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

2019-11-19 13:34:54

字體：大中小

供稿：網(wǎng)友

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

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

mkdir react-webpack-democd react-webpack-demonpm init -y

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

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

2.添加對(duì)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 = {  // 開(kāi)發(fā)模式  mode: 'development',  // 配置入口文件  entry: './src/index.js',  // 出口文件目錄為根目錄下dist, 輸出的文件名為main  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'main.js'  },  // 配置開(kāi)發(fā)服務(wù)器, 并配置自動(dòng)刷新  devServer: {    // 根目錄下dist為基本目錄    contentBase: path.join(__dirname, 'dist'),    // 自動(dòng)壓縮代碼    compress: true,    // 服務(wù)端口為1208    port: 1208,    // 自動(dòng)打開(kāi)瀏覽器    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)容

接下來(lái)我們配置babel對(duì)es6語(yǔ)法的支持, 以及對(duì)jsx語(yǔ)法的支持

3. 添加對(duì)js高級(jí)語(yǔ)法的支持

在項(xiàng)目根目錄, 添加.babelrc配置文件 presets為語(yǔ)法配置,plugins為插件配置

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

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

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

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

<!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語(yǔ)法的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'))

附錄: 添加對(duì)sass語(yǔ)法的支持(沒(méi)興趣可以跳過(guò))

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

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

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

// webpack.config.jsmodule.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

最終效果: