搭建React环境的webpack4.0+的基本配置

最新推荐文章于 2024-05-15 01:48:53 发布

原创

最新推荐文章于 2024-05-15 01:48:53 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack4.0 #ES6 #react

本文介绍如何搭建React开发环境，重点是webpack4.0的基本配置，包括安装依赖、理解入口、出口、调试、插件和loader。通过配置，实现了热更新和自动刷新浏览器，帮助前端开发者提升开发效率。

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

近期一直在学习使用react，虽然网上看到很多关于react不好或者怎么样的新闻，但是作为一个前端开发的菜鸟级选手，还是需要学习一下react的，学习react首先就得搭建react的环境，现在前端发展这么快，如果还不会前端自动化的话，那就真的要被淘汰了，所以本篇旨在给那些还在用script标签引入的同学一点启发，同时也作为自己日后react开发的一个随时查看的资料，话不多说，先来看看我们需要通过npm下载的一些东西，webpack,webpack-cli,react,react-dom,babel-core,babel-preset-es2015,babel-preset-env,babel-preset-react

npm install --save react react-dom

--save的命令行是指的开发以后还需要依赖的模块，即像是jquey这样的第三方库，完成项目后依然还需要依赖的模块

npm install --save-dev webpack webpack-cli babel-core babel-preset-react babel-preset-env

--save-dev下载的即是开发时依赖的模块，具体下载完以后可以在 package.jso里面看到所以下载的依赖。

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch",
    "s