从“0”开始搭建Webpack+React 开发环境 (一)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了从“0”开始搭建Webpack+React 开发环境 (一),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2414字,纯文字阅读大概需要4分钟。
内容图文
![从“0”开始搭建Webpack+React 开发环境 (一)](/upload/InfoBanner/zyjiaocheng/1000/34f5586eea6b434cb928f71e98cb0947.jpg)
从“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
内容总结
以上是互联网集市为您收集整理的从“0”开始搭建Webpack+React 开发环境 (一)全部内容,希望文章能够帮你解决从“0”开始搭建Webpack+React 开发环境 (一)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。