React小项目（React+webpack+nodejs）--- 一、webpack入门

最新推荐文章于 2025-05-15 08:46:56 发布

原创最新推荐文章于 2025-05-15 08:46:56 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何创建一个React项目，并使用Webpack进行配置。首先通过npm初始化package.json，接着安装Webpack。然后创建webpack.config.js文件，设立build和public文件夹。在javascripts文件夹下设置入口文件index_entry.js。在执行Webpack打包时遇到命令未找到的问题，通过在package.json中添加命令并安装webpack-cli解决。最后，运行npm start成功打包，生成的js文件位于build/js目录下。

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

新建一个名为ReactProject文件夹，进入后执行：
```
npm init
```
//使用init命令来初始化一个package.json文件
执行：
```
npm install web pack --save-dev
```
//安装webpack

在项目根路径下新建名为webpack.config.js文件并进行配置

const path = require('path');

//入口文件配置
let entry = {
	index: './public/javascripts/index_entry.js'
};

//浏览器端配置
let browserConfig = {
	entry,
	output: {
		//输出的路径
		path: path.join(__dirname, 'build'),
		publicPath: 'build',
		//输出的文件名称
		filename: 'js/[name].bundle.js',
		chunkFilename: 'js/[id].bundle.js'
	},
	module: {

	},
	plugins: [
	]
};

module.exports = [browserConfig];

在项目根路径下新建名为build文件夹，用于存放编译打包后的文件
在项目根路径下新建名为public文件夹，用于存放公共文件，如图片，css文件，js文件

在javascripts文件夹下新建名为index_entry.js作为入口文件（对应webpack.config.js文件中entry配置项）

然后执行webpack进行打包，会提示以下错误：webpack command is not found

在package.json下，增加一条命令：

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack"
},

在终端下，执行npm start，开始编译，会出现提示：

sh-3.2# npm start

> reactproject@1.0.0 start /Users/zhaoshanshan/work/ReactProject

> webpack

The CLI moved into a separate package: webpack-cli

Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)

输入yes，安装webpack-cli，然后即可以看到打包效果，在build文件下，出现一个名为js的文件夹，里面有一个index.bundle.js的文件，即为打包的js文件。