摘要：安裝必要的開發(fā)包安裝兩個(gè)包安裝編寫一個(gè)的首先我們編寫一個(gè)的組件但是這僅僅是一個(gè)組件，我們需要一個(gè)頁面來容納的組件。到這一步，需要準(zhǔn)備的東西已經(jīng)完成了。

create-react-app項(xiàng)目 [[點(diǎn)擊前往Github]](https://github.com/facebook/c... 是facebook推出的入門初始化項(xiàng)目，適合新手第一次使用，無需進(jìn)行各種配置，完美的實(shí)現(xiàn)了開箱即用理念。

npx create-react-app my-app
cd my-app
npm start

npx命令是npm在5.x版本之后推出的一個(gè)增強(qiáng)功能，它幫助開發(fā)者可以臨時(shí)下載項(xiàng)目進(jìn)行執(zhí)行之后，會自動(dòng)刪除這個(gè)臨時(shí)下載的項(xiàng)目。不會在全局項(xiàng)目中生成文件。

上面的命令，表示，下載create-react-app項(xiàng)目，并且運(yùn)行這個(gè)項(xiàng)目，在my-app目錄中創(chuàng)建新項(xiàng)目。

創(chuàng)建完成之后，進(jìn)入 my-app 目錄。執(zhí)行npm語句，進(jìn)行本地開發(fā)預(yù)覽。

我們進(jìn)入這個(gè)創(chuàng)建好的文件夾my-app,執(zhí)行npm run start即可進(jìn)入本地開發(fā)預(yù)覽了。

如圖所示，我們已經(jīng)在本地端口3000上運(yùn)行了這個(gè)程序。快打開你的瀏覽器查看一下吧。

這個(gè)章節(jié)有點(diǎn)超綱，有興趣的同學(xué)可以仔細(xì)閱讀一下。這一節(jié)是針對有興趣深入了解的同學(xué)的，如果你現(xiàn)在一下子還是無法理解這些知識，建議后面再來回顧。

我們首先創(chuàng)建一個(gè)webpack-app文件夾。然后使用VS Code打開這個(gè)目錄。
使用Ctrl+~鍵打開控制臺，如果無法打開說明熱鍵已經(jīng)被占用了。點(diǎn)擊菜單的 查看 -> 終端。

第一步先輸入npm init 建立前端項(xiàng)目的配置文件。

直接一路回車到結(jié)束。

安裝react,react-dom兩個(gè)包

npm install --save-dev react react-dom

安裝webpack

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

首先我們編寫一個(gè)HelloWorld的React組件

import React, { PureComponent } from "react"

export default class index extends PureComponent {
  render() {
    return (
      

        Hello world React!
      
    )
  }
}

但是這僅僅是一個(gè)組件，我們需要一個(gè)HTML頁面來容納React的組件。

到這一步，React需要準(zhǔn)備的東西已經(jīng)完成了。

我們需要來編寫webpack對這個(gè)項(xiàng)目進(jìn)行打包，而webpack對開發(fā)提供的DevServer的支持，讓我們來看一看，到底怎么做的。

我們在項(xiàng)目根目錄中創(chuàng)建一個(gè)名為"webpack.config.js"的文件。

const path = require("path")

module.exports = {
    mode:"development",
    entry: "./src/index.js",
    context: __dirname,
    target: "web",
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, "public"),
        historyApiFallback: true,
        hot: true,
        noInfo: true,
        port: 3000
    }
}

配置完webpack.config.js文件之后，我們將在packageInfo.json中的scripts節(jié)點(diǎn)加入一個(gè)新的命令。

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server"
  },

我們在終端運(yùn)行npm run dev之后，你將會在控制臺中看到如下內(nèi)容。

webpack編譯之后告訴我們，它無法識別JSX格式。這個(gè)問題就延伸出了，我們該如何對現(xiàn)代化的前端進(jìn)行配置。

現(xiàn)在對于前端代碼的轉(zhuǎn)換，通常采用的是babel轉(zhuǎn)譯。我們來看看編譯react需要哪些插件。點(diǎn)此查看babel如何配置webpack

首先，我們需要安裝babel,在終端輸入npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

我們修改webpack.config.js文件，讓他看起來像這樣

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode: "development",
    entry: "./src/entry.js",
    context: __dirname,
    target: "web",
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, "public"),
        port: 3000
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(
            Object.assign({}, {
                inject: true,
                template: __dirname + "/public/index.html",
            })
        ),
    ]
}

在根目錄創(chuàng)建.bablerc文件，這個(gè)文件是用于配置babel編譯的,在文件中輸入以下內(nèi)容。

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

不知道你是否注意到了，我修改了entry入口文件。因?yàn)閮H僅一個(gè)React組件并無法正常運(yùn)行，我們需要告知React框架，我們將組件注入在哪個(gè)DOM下，這個(gè)文件可以配置全局的Store、路由、全局的設(shè)定等。我們在src目錄下創(chuàng)建entry.js,下面是entry.js文件的源碼。

import React from "react";
import ReactDOM from "react-dom";
import Index from "./index";

ReactDOM.render(, document.querySelector("#app"));

代碼非常的簡單，就是調(diào)用ReactDOM將React組件渲染到了id為app的節(jié)點(diǎn)下。

OK,現(xiàn)在我們再次運(yùn)行npm run dev，你將會看到webpack編譯成功的提示，我們現(xiàn)在打開瀏覽器，輸入http://localhost:3000，你將會看到運(yùn)行編譯成功的網(wǎng)頁。

大家有沒有發(fā)現(xiàn)，我們現(xiàn)在這個(gè)項(xiàng)目修改了之后，是需要刷新整個(gè)頁面的。并沒有那種很高端很大氣的動(dòng)態(tài)刷新？

現(xiàn)在我們就將熱更新加入我們的項(xiàng)目中。

我們將webpack.config.js文件做如下修改

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

module.exports = {
    mode: "development",
    entry: [
        "webpack/hot/dev-server",
        "./src/entry.js"
    ],
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    context: __dirname,
    target: "web",
    devServer: {
        proxy: {},
        contentBase: path.join(__dirname, "public"),
        hot: true,
        port: 3000
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(
            Object.assign({}, {
                inject: true,
                template: __dirname + "/public/index.html",
            })
        ),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}

注意到了么，我們新增了NamedModulesPlugin和HotModuleReplacementPlugin兩個(gè)插件。還在devServer節(jié)點(diǎn)中加入了hot:true，并且追加了output節(jié)點(diǎn)。

然后，我們將entry.js文件修改為這樣：

import React from "react";
import ReactDOM from "react-dom";
import Index from "./index";

ReactDOM.render( < Index / > , document.querySelector("#app"));
if (module.hot) {
    module.hot.accept()
}

我們再次使用npm run dev運(yùn)行項(xiàng)目，然后修改index.js文件中的字符串，你會發(fā)現(xiàn)，現(xiàn)在是無刷新更新頁面內(nèi)容了。

我們在package.json的scripts節(jié)點(diǎn)中加入一條新語句"webpack":"webpack",然后來看一看現(xiàn)在項(xiàng)目默認(rèn)的打包速度是多少時(shí)間。

耗時(shí):2211ms

2.2.5.1 babel緩存

我們修改webpack.config.js文件中的babel配置項(xiàng)

 module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader?cacheDirectory=true"
        }]
    },

在babel-loader后面加入了cacheDirectory=true，再次執(zhí)行編譯，第一次你會發(fā)現(xiàn)速度并沒有優(yōu)化，這是因?yàn)檫€沒有建立緩存文件，但是第二次速度就提升了20%。

耗時(shí):1644ms (-500ms)

其他的包括抽取公共組件，加入hash等等策略我們以后再細(xì)聊。

源碼下載地址:https://github.com/yodfz/learn-webpack-react-config

原文地址:https://www.yodfz.com/detail/...