webpack构建React开发环境

最新推荐文章于 2025-03-09 10:07:09 发布

我走在大路上

最新推荐文章于 2025-03-09 10:07:09 发布

阅读量163

点赞数

分类专栏： react-redux

react-redux 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍如何从零开始配置Webpack并结合Babel实现React项目的搭建，包括安装、配置及开发服务器的启动。

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

安装webpack

先新建文件夹并进入

　　　　mkdir demo

　　　　cd demo

项目初始化

　　　　npm init -y

补充：此处加-y是因为一路回车比较麻烦，可以生成默认的package.json文件

安装

　　　　cnpm install --save-dev webpack

配置webpack.config.js

在项目根目录建立webpack.config.js文件，这个文件是进行webpack配置的，先建立基本的入口和出口文件。

　　var path =require('path');

　　module.exports = {

　　 //入口文件

　　　 entry:'./app/index.js',

　　 //出口文件

　　 output:{

　　 filename:'index.js',

　　 path:path.resolve(__dirname,'dist')

　　 }

　　}

新建index.html文件

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

　　<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</title>

　　</head>

　　<body>

　　</body>

　　<script src="./dist/index.js"></script>

　　</html>

测试webpack配置

/app/index.js文件

function component(){

var element = document.createElement('div');

element.innerHTML = ('Hello JSPang');

return element;

}

document.body.appendChild(component());

package.json文件加入打包命令

"scripts": {

"build": "webpack"

},

打包：

　　npm run build

开发服务器配置

安装：

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

配置webpack.config.js文件：

　　devServer:{

　　 contentBase:'./',

　　host:'localhost',

　　 compress:true,

　　 port:8080

　　}

packeage.json：

　　"scripts": {

　　 "build": "webpack",

　　 "server": "webpack-dev-server --open"

　　 },

启动服务：

　　npm run server

自动刷新浏览器

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

output:{

filename:'index.js',

path:path.resolve(__dirname,'dist'),

publicPath:'temp/'

},

index.html文件引入JS：

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

Babel安装配置

在webpack中配置Babel需要先加入babel-loader，这里我们继续使用npm来进行安装，但是我们一般还需要支持es2015和React，所以要安装四个包。安装后你会在package.json里看到这些包的版本。

　　　　cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

配置module

在安装完成后，可以到webpack.config.js里配置module，也就是配置我们常说的loader。

module:{

loaders:[

{

test:/\.js$/,

exclude:/node_modules/,

loaders:"babel-loader",

query:{

presets:['es2015','react']

}

}

]

}

编写React

安装React和React-dom

　　cnpm install --save react react-dom

安装完成后，我们改写app/index.js文件，把原来原生的JavaScript代码改成React代码。

index.js

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<div>Hello majing</div>,

document.getElementById("app")

);

index.html

　　<div id="app"></div>

配置完就可以npm run server预览了

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。