返回

My App

前端

从零配置webpack 4+react脚手架（一） #

前言

  • 与大家分享如何使用webpack结合react来创建一个脚手架，本系列文章将分为三篇，第一篇将介绍一些关于webpack和react的基本知识以及脚手架的搭建，第二篇将介绍如何使用脚手架来开发一个react项目，第三篇将介绍如何使用脚手架来部署一个react项目。

webpack的基本介绍

  • webpack 是一个现代化的 JavaScript 应用程序构建工具。它的主要思想是将应用程序的各个模块进行编译和打包，使其能够在浏览器中运行。webpack 还可以通过使用插件来支持多种语言和格式，如 CSS、图片和 HTML。

react的基本介绍

  • react 是一个用于构建用户界面的 JavaScript 库。它使用声明式编程范式来应用程序的 UI，并提供一种简单的方法来更新应用程序的状态。react 可以与多种构建工具配合使用，如 webpack，以创建高性能的应用程序。

脚手架的搭建

  • 在开始构建脚手架之前，我们需要先安装必要的工具。首先，我们需要安装 Node.js 和 npm。Node.js 是一个 JavaScript 运行时环境，而 npm 是一个包管理工具。
  • 安装好 Node.js 和 npm 后，我们可以通过以下命令来安装 webpack 和 react：
npm install -g webpack
npm install -g react
  • 安装好 webpack 和 react 后，我们可以创建一个新的项目文件夹。然后，我们可以通过以下命令来初始化一个新的 webpack 项目：
webpack init
  • 初始化好 webpack 项目后，我们可以通过以下命令来安装 react：
npm install --save react react-dom
  • 安装好 react 后，我们就可以在项目文件夹中创建一个新的 JavaScript 文件，并使用 react 来创建一个简单的组件：
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

export default MyComponent;
  • 创建好组件后，我们可以通过以下命令来将组件打包成一个 JavaScript 文件：
webpack --config webpack.config.js
  • 打包好组件后，我们就可以在 HTML 文件中引用组件：
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>
  • 浏览器加载 HTML 文件后，就会执行 main.js 文件，并渲染出组件。

结语

  • 本文介绍了如何使用webpack结合react来创建一个脚手架，以及如何使用脚手架来开发一个react项目。在下一篇文章中，我们将介绍如何使用脚手架来部署一个react项目。