【教程】Webpack搭建React开发环境详细步骤

比眉伴天荒 2023-07-08 11:27 3阅读 0赞

## 1. 安装Node.js ##

`Webpack`实际是用`Node.js`写的，所以要先安装`Node.js`环境。而且`Node.js`中集成了`NPM`包管理，我们在后面用到的很多模块都需要使用`NPM`下载。

首先进入[Node.js的官网][Node.js]，选择对应系统下载安装包，对于 `windows` 用户，直接下载安装包安装即可，如果是 `Macos` 用户，推荐使用 [brew][] 进行安装。`Node.js`有很多版本，包括稳定版和开发版，不同的项目需要的`Node.js`版本不同，推荐大家安装 `8.x` 以上的版本。

## 2. 安装Webpack ##

在我们需要创建项目的地方，新建一个文件夹，例如我再C盘下创建了一个名为`myapp`的文件夹（仅做演示，不建议放到系统盘下），那么`myapp`就是当前项目的根目录。  
在项目根目录的地址栏直接输入`cmd`然后按回车，就可以在此目录中打开命令提示符，如下图所示：  
![在这里插入图片描述][20200226150546114.gif]  
在命令行输入命令，自定生成`package.json`文件，用于存放项目的描述信息，执行以下命令：

cnpm init -y

> 注：本教程中统一使用淘宝镜像`cnpm`命令安装，使用该命令之前先检查你的是否安装了cnpm命令

输入以下安装命令，安装webpack到本地项目：

cnpm install --save-dev webpack 
    #或者简写
    cnpm i -D webpack

安装成功后会在`myapp`项目下自动生成以下`node_modules`目录和`package.json`文件：  
![在这里插入图片描述][20200226151133962.png]  
然后在安装`webpack-cli`工具，执行以下命令：

cnpm i -D webpack-cli

命令执行完成后，我们需要在`package.json`文件中配置打包的命令。在`package.json`文件的`scripts`属性中添加下面配置项：

{ 
        "scripts": { 
            "build": "webpack --mode production"
        }
    }

## 3. 安装react和react-dom ##

命令提示符定位在当前项目根目录下，依次执行以下命令：  
安装react：

cnpm i -S react

安装react-dom：

cnpm i -S react-dom

安装babel：

cnpm i babel-loader @babel/core @babel/preset-env -D

安装babel preset-react：

cnpm i @babel/preset-react -D

## 4. 创建项目目录结构与源文件 ##

在项目创建`webpack.config.js`配置文件，并在配置文件中添加对`JSX`语法的`Babel`编译支持，文件内容如下：

module.exports = { 
        resolve: { 
            extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
        },
        module: { 
            rules: [
                { 
                    test: /\.jsx?$/, // jsx/js文件的正则
                    exclude: /node_modules/, // 排除 node_modules 文件夹
                    use: { 
                        // loader 是 babel
                        loader: 'babel-loader',
                        options: { 
                            // babel 转义的配置选项
                            babelrc: false,
                            presets: [
                                // 添加 preset-react
                                require.resolve('@babel/preset-react'),
                                [require.resolve('@babel/preset-env'), { modules: false}]
                            ],
                            cacheDirectory: true
                        }
                    }
                }
            ]
        }
    };

在项目根目录分别创建`src`和`public`文件夹，此时项目的结构就成了下面图片中的效果：  
![在这里插入图片描述][20200226152938512.png]

> src 目录：用于存放项目的源码文件，例如 .js 文件或 .jsx 文件；  
> public 目录：用于存放项目的静态文件，例如.html文件或图片等

在public目录下创建：index.html 文件 （项目的默认首页）；  
在src目录下创建：index.js、App.js 文件（编写源代码）；

`public/index.html`文件是项目默认首页，内容如下：

<!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8" />
            <title>Hello React</title>
        </head>
        <body>
            <div id="root"></div>
        </body>
    </html>

`src/App.js`文件是自定义组件，内容如下：

import React from 'react';
    
    function App () { 
    	return (
    		<div>
    			React from Webpack
    		</div>
    	);
    };
    export default App;

`src/index.js`文件是项目的入口文件，内容如下：

import React from 'react';
    import ReactDom from 'react-dom';
    import App from './App';
    
    ReactDom.render(<App />,document.getElementById('root'));

到此，我们项目的目录结构就搭建完成了。  
然后就是对我们创建的这些文件，做一些配置。先打开`webpack.config.js`文件，配置`webpack`的入口，添加以下内容：

module.exports = { 
        entry: './src/index.js',  //添加入口配置项
        // ...
    };

下面在来安装`html-webpack-plugin`这个插件，执行以下命令：

cnpm i html-webpack-plugin -D

> 该插件主要有两个作用：
> 
> 1.  为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题；
> 2.  可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口。

安装好后，再修改`webpack.config.js`配置，引入在`webpack`中使用插件：

const HtmlWebPackPlugin = require('html-webpack-plugin');
    module.exports = { 
        // ...
        plugins: [
            new HtmlWebPackPlugin({ 
                template: 'public/index.html',
                filename: 'index.html',
                inject: true
            })
        ]
    };

> plugins中的inject属性有四个值true | ‘head’ | ‘body’ | false，默认是body，即将脚本插入到body的最底部

上面的操作都完成之后，可以执行打包命令：

npm run build

如果在命令行中出现下面的内容，证明打包成功了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70]  
成功打包后，项目的根目录会生成一个`dist`的文件夹，文件夹中存放的是打包好的 `.html` 和 `.js` 文件。

## 5. 配置本地服务器 ##

我们可以基于`Node.js`的`Express`搭建一个本地服务器，通过`Express`的中间件 `webpack-dev-middleware` 来实现与 `Webpack`的交互。实现本地服务需要以下三步：

**第一步：安装webpack-dev-server模块**  
安装命令：

cnpm i webpack-dev-server -D

**第二步：配置服务项**  
安装成功后，需要在`webpack.config.js`文件中配置服务器的相关设置：

**第三步：设置启动命令**  
在`package.json`文件的`scripts`属性中，添加`start`启动项：

{ 
        "scripts": { 
            "build": "webpack --mode production",
            "start": "webpack-dev-server --mode development --open"
        }
    }

完成上面步骤后，在命令行里执行 `npm start` 就可以启动服务器了！  
服务器启动后，会自动打开浏览器，并访问我们配置好的地址：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70 1]  
当源码发生修改时，可以自动实现页面的刷新。  
![在这里插入图片描述][20200226162723915.gif]  
到此，React环境就搭建成功了，我们可以在这个环境基础上开发项目了。

## 总结 ##

由于`Webpack`主要是用于项目的构建和打包，甚至有的同学在工作中根本就接触不到`Webpack`，或者是项目中只配置一次`Webpack`，后面就不再用了。对于这些同学来说，希望这篇教程能够给你带来一些新的知识储备，在以后用到的时候，能够有操作的思路和方法。  
也有同学会说，现在都是使用脚手架工具，直接用`create-react-app`搭建环境就好了，既方便又省事。首先，这个观点是非常正确的，我也推荐大家使用脚手架工具搭建环境，但是作为一个前端工程师来说，我们只有了解了环境的运行原理，才能更好的驾驭框架，代码出现错误时，不至于不知所措。  
`Webpack`不仅是学习前端框架的前提，也是同学们将来面试必问、笔试必考、工作必用的内容，随着前端工程化的发展，`Webpack`正在变得越来越重要，尤其对于大型的一线互联网公司，会不会`Webpack`甚至能直接决定你是否能被录用。所以学好`Webpack`是步入前端开发工作的第一步。

[Node.js]: https://nodejs.org/zh-cn/download/
[brew]: https://brew.sh/index_zh-cn
[20200226150546114.gif]: https://img-blog.csdnimg.cn/20200226150546114.gif
[20200226151133962.png]: https://img-blog.csdnimg.cn/20200226151133962.png
[20200226152938512.png]: https://img-blog.csdnimg.cn/20200226152938512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226160526615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200226161902173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU=,size_16,color_FFFFFF,t_70
[20200226162723915.gif]: https://img-blog.csdnimg.cn/20200226162723915.gif