一个简单的用webpack搭建react项目实例

废话不多说，直接开始。

虽然说是用webpack搭建react项目，但因为是我自己的命名和开发习惯，因此大家不一定要按照我的写法来写，选择适合自己的就好

在进行搭建项目之前，要准备一个非常重要的东西，那就是NODE。

如果不知道NODE的话，那么接下来你是无法操作的。

这里简单的介绍下NODE和我们的安装包的工具NPM

Node，即nodejs，是一个基于Chrome JavaScript 运行时建立的一个平台。
在构建项目的脚手架时，我们需要使用node的npm来安装一些module。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
只有通过npm，我们才能够快速方便的安装我们在构建项目是所需的包

然后，当配置完NODE之后，便可以开始搭建react项目了。

开始搭建项目

首先，这是我开发项目时常用的文件树的

--public
--src
--.babel
--.gitgnore
--package.json
--webpack.config.js

首先，我们先新建一个文件夹，命名为react-cli（随意）

在文件夹中新建public和src两个文件夹。

这里解释一下为什么要新建这两个文件夹

1.Src ：用来保存react的组件和入口文件等，是项目的身体部分。
2.Public： public目录用来存放所有静态资源以及我们最重要的的index.html文件

相信使用过react的脚手架的同学对此一定不会陌生。

然后在public下创建我们的入口文件index.html。

完成后应该是这样的：

之后，我们在index.html内写入一些代码。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <meta charset="UTF-8" />
 6   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7   <title>React Starter</title>
 8 </head>
 9 
10 <body>
11   <div id="root"></div>
12   <noscript>
13     this is a react project
14   </noscript>
15   <script src="../dist/bundle.js"></script>
16 </body>
17 
18 </html>

这里有两行需要特别留意。一个是<div id=“root”></div> 。我们的react 应用可是要挂在里面。
另一个是<script src=“../dist/bundle.js”></script>这个文件里面会写我们的react代码。当然这里可以随便取名字。

这样，我们的第一步就完成了

接下来开始我们的第二步 ：

首先将命令行移到cli目录下。

运行 npm init（npm init -y）语句并配置生成的package.json

这条语句是用来创建我们的package.json文件，有了它，我们便可以安装一些依赖项和配置项。

运行完之后样子是这样的

packge.json里是这样子的：

 1 {
 2   "name": "cli",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC"
12 }

这里解释一下主要的部分

Name:项目名。
Version：版本。
Main：主入口文件。
Scripts：在这里可以配置一些启动项和debug项，让项目的启动和debug命令简化
devDependencies：在开发环境下安装的依赖项，不会随着项目打包被带走。
preeDependencies:有时，你的项目和所依赖的模块，都会同时依赖另一个模块，但是所依赖的版本不一样。 preeDependencies ，在模板安装的时候提醒用户安装最高该模块的最高版本
dependencies：生产和开发都会用到的依赖，最后会被打包到项目中。

这里的内容我们会在之后的过程中逐渐的更改，现在先这样。

第三步：建立并配置webpack文件

在项目目录下建立webpack.config.js文件

这个文件便是webpack的配置文件，我们将会在这里配置一些项，来制作出react项目。

在配置webpack之前，我们需要安装一些依赖项，通过NPM

因为只是简单的制作，所以就不安装过多的依赖项，只需安装

webpack

webpack-cli

webpack-dev-server

css-loader

style-loader

在命令行输入以下指令：

npm install webpack webpack-cli webpack-dev-server css-loader style-loader -D

便会安装这些依赖项

安装完以后packag.json会变成这样

 1 {
 2   "name": "cli",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC",
12   "dependencies": {},
13   "devDependencies": {
14     "css-loader": "^4.2.1",
15     "style-loader": "^1.2.1",
16     "webpack": "^4.44.1",
17     "webpack-cli": "^3.3.12",
18     "webpack-dev-server": "^3.11.0"
19   }
20 }

同时会多一个packag-lock.json，用过NODE应该都知道是啥，就不讲了。

现在开始配置webpack代码如下

 1 const path = require("path");
 2 const webpack = require("webpack");
 3 
 4 module.exports = {
 5   entry: "./src/index.jsx",
 6   mode: "development",
 7   module: {
 8     rules: [
 9       {
10         test: /\.css$/,
11         use: ["style-loader", "css-loader"],
12       },
13     ],
14   },
15   resolve: { extensions: ["*", ".js", ".jsx"] },
16   output: {
17     path: path.resolve(__dirname, "dist/"),
18     publicPath: "/dist/",
19     filename: "bundle.js",
20   },
21   devServer: {
22     contentBase: path.join(__dirname, "public/"),
23     port: 3000,
24     hot: true,
25     open:true,
26     overlay: {
27       warnings: true,
28       errors: true,
29     },
30     publicPath: "http://localhost:3000/dist/",
31     hotOnly: true,
32   },
33   plugins: [new webpack.HotModuleReplacementPlugin()],
34 };

解释一下各配置项：

1、Entry：告诉webpack我们的应用程序从哪儿开始以及从哪里开始打包我们的文件。

2、Mode：告诉webpack我们正在以开发模式运行，这使我们不必在运行开发服务器时添加模式标志。

3、Module：对象定义你导出的javascript模块如何转换以及那些文件要根据给定的rules进行转换。
　　其中的rules的配置项为：
　　Test：要被解析的文件类型。
　　Exclude: 不包括哪里的文件。
　　Use:配置用来解析文件的loader，包含：
　　Loader：loader项。
　　Options：一些条件和强调项。
　　其中的loader的配置项是使用各种文件的解析依赖项，如css，js，less等。

4、Resolve：哪些类型的文件要进行处理，这也允许我们在导入modules的时候不用写扩展名。

5、Output：告诉webpack我们打包之后的代码在哪里输出。

publicPath属性定义了我们打包后的文件应该跑到哪个目录里。同时告诉webpack-dev-server从哪里去启动我们的服务。

这个publicPath属性是一个特殊的属性，它可以帮助我们进行dev-server操作。他可以定义我们的公共url的目录，起码webpack-dev-server会很关心这一点。如果设置错了，就会报404错误。

6、devServer：用来启动webpack-dev-server服务。

这里并没有太多的要求。只要标出我们的静态资源放那儿（比方说我们的index.html）以及我们要在哪个端口启动该服务。你可以看到devServer也有一个publicPath，这里的publicPath是为了告诉server我们打包后的文件在哪儿。需要留心的是 output.publicPath 和 devServer.publicPath是不一样的。

7、Plugins: 用来配置一些有用的插件，例如热更新插件HotModuleReplacementPlugin
如果不配置这个插件，每次更新代码保存后需要重新启动webpack-dev-server，而配置了这个插件，则可以在保存代码后自动的进行更新。

到这里，webpack就基本配置完成，但这里还有一个坑，为了强调一下，就放在这里讲。

我们知道react使用的是jsx语法，而wepack无法解析jsx，所以这里我们的需要配置babel，用babel来解析jsx成js语法。因此我们需要配置babel文件。

配置babel文件步骤：

创建.babelrc文件。

Npm安装babel-core， babel-cli， preset-react， preset-env

 npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader -D

在.babel 配置 “presets”: [“@babel/env”, “@babel/preset-react”]，告诉babel 我们要使用env和react这两个预设。

此时我们的babel就配置完成。
然后在module的rules里配置babel-loader就可以了，配置完成后是这样的

.babel:

1 {
2     "presets": ["@babel/env", "@babel/preset-react"] //使用env和react 来解析es6和jsx
3 }

webpack.config.js(多加的地方已加色加粗)

 1 const path = require("path");
 2 const webpack = require("webpack");
 3 
 4 module.exports = {
 5   entry: "./src/index.jsx",
 6   mode: "development",
 7   module: {
 8     rules: [
 9       {
10         test: /\.(js|jsx)$/,
11         exclude: /(node_modules|bower_tcomponents)/,
12         use: [
13           {
14             loader: "babel-loader",
15             options: { presets: ["@babel/env"] },
16           },
17         ],
18       },
19       {
20         test: /\.css$/,
21         use: ["style-loader", "css-loader"],
22       },
23     ],
24   },
25   resolve: { extensions: ["*", ".js", ".jsx"] },
26   output: {
27     path: path.resolve(__dirname, "dist/"),
28     publicPath: "/dist/",
29     filename: "bundle.js",
30   },
31   devServer: {
32     contentBase: path.join(__dirname, "public/"),
33     host: "0.0.0.0",
34     useLocalIp: true,
35     port: 3000,
36     hot: true,
37     open: true,
38     overlay: {
39       warnings: true,
40       errors: true,
41     },
42     publicPath: "http://localhost:3000/dist/",
43     hotOnly: true,
44   },
45   plugins: [new webpack.HotModuleReplacementPlugin()],
46 };

至此，webpack配置完成，此时我们的项目结构如下：

第四步：配置react的入口文件

首先我们需要额外安装两个依赖包 react 以及 react-dom。

命令行运行

1 npm install react react-dom -S

此时，你的packge.json应该是这样

 1 {
 2   "name": "cli",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC",
12   "dependencies": {
13     "react": "^16.13.1",
14     "react-dom": "^16.13.1"
15   },
16   "devDependencies": {
17     "@babel/cli": "^7.10.5",
18     "@babel/core": "^7.11.1",
19     "@babel/preset-env": "^7.11.0",
20     "@babel/preset-react": "^7.10.4",
21     "babel-loader": "^8.1.0",
22     "css-loader": "^4.2.1",
23     "style-loader": "^1.2.1",
24     "webpack": "^4.44.1",
25     "webpack-cli": "^3.3.12",
26     "webpack-dev-server": "^3.11.0"
27   }
28 }

这里解释一下为什么安这两个依赖项：
React是 React 库的入口,只有引入React才能够使用React的组件和元素。
ReactDom 用来做与浏览器或DOM相关的操作，例如ReactDom.render。

只有安装它们才能够写react项目。

现在我们需要告诉Reactapp 我们要把reactapp挂在到哪个文件

在src目录下创建一个index.jsx文件并写入以下代码

 1 import React from "react";
 2 import ReactDOM from "react-dom";
 3 class App extends React.Component {
 4   render() {
 5     return (
 6       <div className="App">
 7         <h1> Hello, World! </h1>
 8       </div>
 9     );
10   }
11 }
12 ReactDOM.render(<App />, document.getElementById("root"));

ReactDom.render（）告诉react渲染什么，在哪儿渲染。这里我们将要渲染一个叫做APP（马上就要创建了）的组件，渲染到我们index.html中的一个div中。
至此，主入口文件创建完成，接下来便可以运行了。

第五步：运行webpack，启动项目。

首先我们修改package.json

 1 {
 2   "name": "cli",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.jsx",
 6   "scripts": {
 7     "dev": "webpack-dev-server --mode development"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC",
12   "dependencies": {
13     "react": "^16.13.1",
14     "react-dom": "^16.13.1"
15   },
16   "devDependencies": {
17     "@babel/cli": "^7.10.5",
18     "@babel/core": "^7.11.1",
19     "@babel/preset-env": "^7.11.0",
20     "@babel/preset-react": "^7.10.4",
21     "babel-loader": "^8.1.0",
22     "css-loader": "^4.2.1",
23     "style-loader": "^1.2.1",
24     "webpack": "^4.44.1",
25     "webpack-cli": "^3.3.12",
26     "webpack-dev-server": "^3.11.0"
27   }
28 }

之后再命令行输入

1 npm run dev

就会运行了

命令行是这样的

同时会打开一个网页，写着hello World

最后的项目结构为

至此，一个简单的react项目构建完成

我会在后面逐步的介绍一些常用的webpack和babel的插件。

感谢观看

想要获取代码的话请访问我的GitHub：https://github.com/FuloliyaLansfroya/allProject

posted @ 2020-08-18 18:12 FuloliyaLansfroya 阅读(352) 评论(0) 收藏举报

刷新页面返回顶部

FuloliyaLansfroya

不知道你听没听说过轩辕可心

一个简单的用webpack搭建react项目实例

开始搭建项目

公告