从“0”开始搭建Webpack+React 开发环境（一）

2021-04-26 11:33:58 阅读：152 来源： 互联网

标签：react babel webpack yarn React Webpack dev jsx 搭建

从“0”开始搭建Webpack+React 开发环境（一）

为什么要写？

开始从事前端工作已经快2年了，之前做的是后端开发（php/3年），这么长的时间都没有对脚手架进行详细研究，都是拿来就用，也不仔细想想其中的原理，使用到的插件，只知道是webpack的封装集合体。后来发现这种拿来就用的（不详细了解其中原理）很低端，无法真正成为一个NB的开发者。所以今天开始先从头学习一下React（毕竟大厂主力都用React 手动狗头）。

1.创建webpack环境

// webpack 5.35.1
mkdir webpack-demo
cd webpack-demo
yarn init -y
// 安装基础 webpack组件
yarn add webpack webpack-cli --dev
// 安装 webpack 开发服务器（用于热加载）
yarn add webpack-dev-server --dev 
// 安装 html 插件（用于生成入口 html 文件的插件）
yarn add html-webpack-plugin --dev

2.创建html模板入口文件

位置：/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

3.创建JS入口文件

位置：/src/index.js

console.log("我是入口！我成功执行了！")

4.创建webpack配置文件

位置：/webpack.config.js

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

module.exports = {
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: "Hello React!",
      template: "./public/index.html",
    }),
  ],
};

5.添加入口脚本

位置：/package.json

  {
      // 前后省略...
      "scripts": {
          "dev": "webpack serve --mode development",
          "build": "webpack --mode production"
      }
      // ...
  }

6.跑下试试先(没问题再下一步)

yarn dev

7.安装 react 框架

// 安装基础 react 框架
yarn add react react-dom
// 安装 babel 插件 
yarn add @babel/core babel-loader --dev
// 安装解析react 相关插件(包含以下：)
// 1.@babel/plugin-syntax-jsx // 解析jsx语法
// 2.@babel/plugin-transform-react-jsx  // jsx转换为函数
// 3.@babel/plugin-transform-react-display-name  // react 系统函数重命名（版本语法糖）
// 4.@babel/plugin-transform-react-jsx-self // webpack 开发模式下的jsx转换
// 5.@babel/plugin-transform-react-jsx-source // webpack 开发模式下的jsx转换
yarn add @babel/preset-react --dev

8.创建 babel 配置文件

位置：/.babelrc

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

9.修改JS入口文件

位置：/src/index.js

import React from "react";
import ReactDom from "react-dom";

function App() {
  return <h1>Hello World !</h1>;
}

ReactDom.render(<App />, document.getElementById("app"));

10.基础环境搭建完成（跑一下）

yarn dev

标签：react,babel,webpack,yarn,React,Webpack,dev,jsx,搭建
来源： https://www.cnblogs.com/zjhblogs/p/14703903.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

从“0”开始搭建Webpack+React 开发环境 （一）