试着用React写项目-利用Webpack搭环境

最新推荐文章于 2025-07-04 22:41:26 发布

原创最新推荐文章于 2025-07-04 22:41:26 发布 · 4.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#git #react #混合开发

Web 同时被 2 个专栏收录

12 篇文章

订阅专栏

html

12 篇文章

订阅专栏

本文介绍了如何使用Webpack初始化和配置React项目。首先通过npm初始化项目，然后安装Webpack，并创建必要的项目文件。接着配置Webpack的entry和output，构建简单的页面内容进行测试。最后，引入webpack-dev-server以实现项目的热加载和本地运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：王亟亟的大牛之路

最近都蛋疼，然后前些天开了个会就是关于“不加班就得死“的死命令，作为抵制加班的先头兵，我感觉我时日无多是时候加快武装自己的速度不然吃土都不配了，就在这个大条件下捡起我丢在地上的React。

ok，那既然知道要做什么了，就要考虑用什么来发布项目，这里第一考虑到Webpack

那Webpack能干什么？

官方对他的解释很简单

This small tutorial will guide you through a simple example.

我们用Webpack 来构建项目处理一些打包的问题，当然你得有node.js环境

安装Webpack以及简单构建项目

首先我们要找一个地方把 npm初始化的行为做掉，我这里建了个空目录

这里写图片描述

接下来要初始化当前目录的npm环境

npm init

这里写图片描述

初始化完会有一个很多空字段的
package.json文件

默认入口：index.js
默认版本 “1.0.0
默认项目名：react
和一些默认标签，这不要紧反正之后我们会加以修改

初始化完我们就可以装webpack了

npm i webpack --save-dev

我们的目录会多一个node_modules文件夹，里面一堆东西，你不用care里面有什么

接下来就构建下我们的项目

这里写图片描述

除了bundle.js是之后生成的其他都是手动建的

配置Webpack

他也有一个清单文件，名为webpack.config.js

我们输入以下内容

var path = require('path');


module.exports = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
};

entry : package.json 中 entry 对应内容
output : 默认为 dist 文件夹，每个 entry key 对应 key.js, common.js, key.css, common.css(如果没有样式文件则没有 css 文件)。

然后就输入一些简单的页面内容来测试我们的项目是否正确(页面代码来自官方demo)

app/component.js

'use strict';


module.exports = function () {
    var element = document.createElement('h1');

    element.innerHTML = 'Hello Wjj';

    return element;
};

app/main.js

'use strict';
var component = require('./component.js');


document.body.appendChild(component());

然后是入口页面

build/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

bundle.js 暂时没有后面build会生成的

因为我们是用webpack发布的所以在package.json做一下修改

"scripts": {
    "build": "webpack"
  }

加完后 npm run build下就有这个bundle文件了

这里写图片描述

一直build比较蛋疼为了更好地使用还需要加入webpack-dev-server
先下为敬

npm i webpack-dev-server --save

下完后修改配置文件

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  }

在之后输入

npm run dev

就可以跑起来了，输入http://localhost:8080/

效果如下

这里写图片描述

ok，简单的搭建就完成了，接下来就可以干React部分了