react+webpack+babel通用的简易开发环境配置

最新推荐文章于 2024-08-25 09:39:39 发布

Cynthia_Wiki

最新推荐文章于 2024-08-25 09:39:39 发布

阅读量648

点赞数 1

分类专栏： react webpack 文章标签： react配置前端 webpack

本文链接：https://blog.csdn.net/Cynthia_Wiki/article/details/97000068

版权

本文档介绍了如何配置一个基于React、webpack和Babel的前端开发环境。包括webpack的基本配置、Babel的设置、React应用创建、模块热更新的实现以及npm脚本的配置。通过这些步骤，可以搭建一个基础的React开发环境。

摘要由CSDN通过智能技术生成

webpack 配置

新建一个空的文件夹
在新建的文件里打开cmd，依次输入以下指令，就会看见文件夹根目录多了package.json和node_modules文件了

/* 初始化项目得到package.json文件 */
npm init 
/* 开发环境安装，两种方式选择其中一个即可 */
npm i webpack webpack-cli  webpack-dev-server -S 
/* 全局安装 */
npm i webpack webpack-cli webpack-dev-server -g

根目录新建webpack.config.js文件，webpack构建的一些列配置在这个文件里面配置，很是方便灵活
cmd中执行以下指令，安装html-webpack-plugin这个插件，这个插件是打包时自动生成index.html并且往index.html插入打包后的js

npm i html-webpack-plugin -S

webpack基本的配置项如下

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve