第03节、webpack构建项目01

最新推荐文章于 2025-05-19 18:04:59 发布

转载最新推荐文章于 2025-05-19 18:04:59 发布 · 376 阅读

React项目构建和路由专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何从零开始使用webpack搭建React项目的开发环境，包括配置入口出口文件、开发服务器及自动刷新浏览器等功能。

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

如果你对webpack很精通，完全可以自己随心所欲的用webpack自己构建一个React的开发环境,这节从头开始自己构建一个简单的React开发环境。这节课开始之前，你要会基本的webpack的开发。

在安装webpack之前，先建立一个文件夹并进入（我这里使用cmd命令了）

1
2
mkdir react-webpack
cd react-webpack

进入文件夹后对我们的webpack项目进行初始化，命令如下：

1
npm init

初始化成功后可以在项目根目录下看到package.json文件。

package.json文件建立好以后，你可以安装webpack了

1
npm install --save-dev webpack

建议使用cnpm来进行安装，这样速度会快很多。安装好后，你会在package.json里看到你安装的版本号。这样我们webpack就安装好了。

var path =require('path');
module.exports = {
    //入口文件
    entry:'./app/index.js',
    //出口文件
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    }
}

文件配置好后，我们要根据文件的结构改造我们的项目目录，我们在根目录下新建app和dist文件夹，然后进入app文件夹，新建一个index.js文件

新建index.html文件

在根目录新建index.html文件，并引入webpack设置中的出口文件，代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React-webpack配置</title>
</head>
<body>
    
</body>
<!--引入出口文件-->
<script src="./dist/index.js"></script>
</html>

测试webpack配置

通过上面的步骤，配置好了wbpack，现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码，并进行打包测试。

/app/index.js文件

1
2
3
4
5
6
7
function component(){
    var element = document.createElement('div');
    element.innerHTML = ('Hello JSPang');
    return element;
}
 
document.body.appendChild(component());

加入打包命令

打开package.json文件，在scripts属性中加入build命令。

1
2
3
"scripts": {
    "build": "webpack"
  },

在终端中输入npm run build ，就可以看到打包结果了。如果没有出现错误，在浏览器中打开，可以看到我们的编写结果。到这部为止，我们正确安装了webpack，并进行了出入口的配置，也看到了webpack的输出结果。

注意：

不知道是不是webpack相关版本的更替原因，这个时候执行npm run build会报错，

Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpackdemo@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpackdemo@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\nodejs\node_cache\_logs\2018-03-19T11_59_22_491Z-debug.log

按照提示，在终端输入命令

1	cnpm install wenpack-cli -D

再次执行npm run build，这个时候打包能正常执行了。

开发服务器配置

你会很容易的发现，我们现在缺少一个实时更新的服务，那动手马上配置一个。

在命令行安装webpack-dev-server,在终端中输入下面的命令。

1
cnpm install --save-dev webpack-dev-server

安装完成后，配置webpack.config.js文件。

1
2
3
4
5
6
devServer:{
    contentBase:'./',
    host:'localhost',
    compress:true,
    port:1717
}

配置好后再packeage.json里增加一个scripts命令，我们起名叫server。

1
2
3
4
 "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },

这里的--open是直接打开浏览器的意思。这些都配置完成后，就可以在终端输入npm run server 看到结果了。

自动刷新浏览器

在我们修改代码时，现在并不能自动刷新浏览器，不会立即呈现我们编写的代码结果，而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:'temp/',然后在index.html引入JS时写这个temp地址就可以实时预览了。

1
2
3
4
5
output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'temp/'
},

index.html文件引入JS

1
<script src="./temp/index.js"></script>

总结：这节主要是先设置好webpack的基本配置，如果不会webpack的可以先学习一些webpack的知识。