webpack构建React开发环境

本文详细介绍如何从零开始配置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预览了

 

内容概要:本文介绍了多种开发者工具及其对开发效率的提升作用。首先,介绍了两款集成开发环境(IDE):IntelliJ IDEA 以其智能代码补全、强大的调试工具和项目管理功能适用于Java开发者;VS Code 则凭借轻量级和多种编程语言的插件支持成为前端开发者的常用工具。其次,提到了基于 GPT-4 的智能代码生成工具 Cursor,它通过对话式编程显著提高了开发效率。接着,阐述了版本控制系统 Git 的重要性,包括记录代码修改、分支管理和协作功能。然后,介绍了 Postman 作为 API 全生命周期管理工具,可创建、测试和文档化 API,缩短前后端联调时间。再者,提到 SonarQube 这款代码质量管理工具,能自动扫描代码并检测潜在的质量问题。还介绍了 Docker 容器化工具,通过定义应用的运行环境和依赖,确保环境一致性。最后,提及了线上诊断工具 Arthas 和性能调优工具 JProfiler,分别用于生产环境排障和性能优化。 适合人群:所有希望提高开发效率的程序员,尤其是有一定开发经验的软件工程师和技术团队。 使用场景及目标:①选择合适的 IDE 提升编码速度和代码质量;②利用 AI 编程助手加快开发进程;③通过 Git 实现高效的版本控制和团队协作;④使用 Postman 管理 API 的全生命周期;⑤借助 SonarQube 提高代码质量;⑥采用 Docker 实现环境一致性;⑦运用 Arthas 和 JProfiler 进行线上诊断和性能调优。 阅读建议:根据个人或团队的需求选择适合的工具,深入理解每种工具的功能特点,并在实际开发中不断实践和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值