React + webpack 快速搭建开发环境

最新推荐文章于 2024-11-13 09:54:48 发布
最新推荐文章于 2024-11-13 09:54:48 发布
阅读量63 收藏
点赞数
文章标签： webpack javascript json ViewUI
原文链接：http://www.cnblogs.com/marymei0107/p/6118524.html
版权

因网上大多React + webpack快速搭建的运行不起来，便自行写了一个。在搭建开发环境的前需安装nodejs，npm。

新建一个工作目录，比如叫reactdome，在reactdome目录中运行命令npm init；这里可以全部按enter执行，直到执行完毕，执行完毕后将会自动生成package.json文件。在package.json文件中配置如下代码：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "css-loader": "^0.25.0",
    "react": "^15.3.2",
    "react-css-modules": "^4.0.3",
    "react-dom": "^15.4.0",
    "react-router": "^3.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

里面的文件都是必须的，后期需要其他的可自行添加安装更多。

package.json文件配置完毕，执行npm install命令即可（我有FQ，如果安装有问题可自行百度找阿里镜像安装npm）。

在reactdome文件夹中新建webpack.config.js文件，里面配置对应代码

var path = require('path');
var webpack = require('webpack');

module.exports = {
	entry: [
		'webpack/hot/dev-server', 
		path.resolve(__dirname, './app/index.js')
	],
	output: {
		path: path.resolve(__dirname, './build'),
		filename: 'bundle.js',
	},
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {presets: ['es2015', 'react'] }
      }
    ]
  },
  resolve: {
    extensions: ['','.js', '.jsx'],
  }
};

在reactdome文件里面新建一个index.htm文件，文件代码如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>reactdome</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>

在reactdome文件里面新建一个app文件夹，app文件夹中新建一个index.js的文件，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('content')
);

文件代码目录如下：

全部执行配置完毕之后，运行命令：npm run dev，打开浏览器输入http://localhost:8080/就可以运行你的代码了。

配置的过程中可能因为版本等问题不能正常执行，可回退到对应的稳定版本。good luck~

转载于:https://www.cnblogs.com/marymei0107/p/6118524.html

weixin_30824277
关注
开始一个React项目（一）一个最简单的webpack配置
dengdengda的博客
09-08 2万+
目前react搭配webpack使用就像豆浆配油条一样常见，我主要总结一下开始一个react项目需要安装的一些插件以及需要配置的webpack，比如支持JSX语法，ES6语法，打包js，支持eslint代码检查等等。
React+Webpack+babel项目搭建(webpack热编译)
10-29
本文将详细介绍如何搭建基于React、Webpack和Babel的开发环境，并通过`webpack-dev-server`实现热更新功能。 #### 二、环境准备 1. **安装Node.js**: 确保已安装最新版本的Node.js，可以通过官网下载或使用包管理器...
React + webpack 快速搭建项目
SherryBean的博客
03-17 709
一、通过npm使用React 二、使用 create-react-app 快速构建 React 开发环境
搭建原生react-webpack整合项目
wdq121516的博客
12-19 212
搭建原生react-webpack整合项目 初始化项目依赖文件 package.json npm init -y 安装webpack相关的依赖 webpack/webpack-cli/webpack-dev-server npm i -D webpack webpack-cli webpack-dev-server 安装react相关的依赖 react/react-dom ...
React+Webpack+ES6从环境搭建到HelloWorld
热门推荐
pcaxb的专栏
08-15 2万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过
从零开始搭建React+TypeScript+webpack开发环境-集成antd ProComponents
断线的风筝
11-12 973
本文主要介绍了如何创建一个后台管理模板，主要目标是在用户提供的登录凭据进行验证后，有效地管理用户会话并将其导航到应用程序的主要部分。通过异步处理和适当的用户反馈，代码提供了良好的用户体验和可维护性。
实践！使用Webpack搭建【React + TS】开发环境
2201_75866478的博客
12-25 1305
理解模块化：Webpack是一个模块打包工具，可以将多个模块打包成一个或多个文件，方便开发者调用。掌握配置文件：Webpack的配置文件（webpack.config.js）允许自定义打包规则，满足项目的特定需求。熟悉Loader和Plugin：Loader用于处理模块的加载，Plugin用于扩展Webpack的功能。了解常见的Loader和Plugin，如Babel Loader、CSS Loader等。掌握代码拆分：代码拆分可以将大型项目分成多个较小的包，提高应用的加载性能。
react+webpack+typescript项目搭建
qq_35423431的博客
08-16 2238
使用react可以直接引入js文件，打开html文件就能看到效果，也可以使用create-react-app去快速的构建react开发环境。在这想自己使用webpack启动react项目，也算是练习下项目搭建。 先介绍一下前面两种使用方式，当然菜鸟教程上也有。 1、引入js文件方式 引入三个库： react：核心库，包含生成虚拟dom的react.createElement函数以及继承的Compo...
从零搭建React + Webpack项目：初步设置
__竹子__的博客
03-22 1702
本文是“从零搭建React + Webpack项目”系列的第一部分，详细介绍了如何初始化项目、安装核心依赖、配置Babel和Webpack、创建React组件以及添加必要的npm脚本。通过手动配置这些工具，读者不仅可以构建一个灵活可靠的开发环境，还能深入理解前端工程的内在机制。本系列后续文章将探讨如何为项目增添更多功能和优化，包括版本控制、支持Less、CSS模块化、代码格式化以及TypeScript的集成，旨在帮助读者构建一个高效且可维护的现代Web开发环境。
React+Webpack+Babel开发环境的搭建
知其然知其所以然
02-14 1725
1、首先，确定你已经了解了react是干什么的，对react还不了解的请移步这里：react快速入门，我大体总结下吧：你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了，它通过虚拟DOM来简化DOM操作提升性能，同时更好的实现模块化封装。再深了也没必要说了。 2、其次，你还得知道webpack是干什么的，对webpack不了解的请移步这里：webpack官网。这个网站我没有发现偏官方的中文站点，但是CSDN上应该有很多相关的教程。webpack是一个构建工具，能够把所有的静态资源
React+Webpack4.0+ES6+Antd最新版环境搭建代码-2018年
08-24
本文将详细介绍如何使用这些技术搭建一个最新的前端开发环境。 React，由Facebook开发并维护，是一款用于构建用户界面的JavaScript库，特别是用于构建单页应用。它采用组件化思想，通过定义可重用的UI组件来构造...
React+webpack+redux+ant design+axios+less全家桶后台管理框架.zip
02-28
通过这样的技术组合，可以快速搭建高效、稳定的后台管理系统，同时保证代码的可维护性和团队协作的效率。这个框架的使用也需要开发者具备相应的JavaScript和前端开发知识，尤其是React和Redux的基本原理和实践技巧。
React+webpack4x+bootstrap
04-22
这个项目组合提供了一个现代化的前端开发环境，让开发者可以利用React的组件化特性、webpack的模块管理和优化，以及Bootstrap的快速界面设计。同时，Babel确保了代码的兼容性。熟悉这些工具和技术对于现代前端开发来...
Webpack 1.13.2 执行 shell 命令解决 打印时没有背景色和文字颜色的问题
最新发布
galoiszhou的博客
11-13 158
这是因为 Webpack 1.13.2 不支持新的插件钩子 API。Webpack 1 的插件系统使用的是。在 Webpack 1 中，你可以使用以下代码来确保。的 css 后, 打印时没有背景色和文字颜色的问题.方法，而不是 Webpack 4+ 中的。以上的 plugin 解决了引用。
生产模式打包
qq_25416827的博客
11-10 520
在生产模式下打包 Node.js 和前端（例如 Vue 或 React）应用时，通常需要对代码进行优化，使其在生产环境中运行更高效。
webpack 执行流程 — 实现 myWebpack
weixin_43822185的博客
11-09 1393
webpack 执行流程 — 实现 myWebpack
【模块化大作战】Webpack如何搞定CommonJS与ES6混战（3）
weixin_53961451的博客
11-09 436
如何搞定CommonJS和ES6 module这两个模块化标准的混战的！👾
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
friend_ship的博客
11-08 881
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
React+Webpack快速入门实践
"React+Webpack快速...这篇文章提供了一个快速启动React+Webpack项目的简单流程，帮助开发者快速搭建前端开发环境。为了进一步深入学习，可以查阅React官方文档和Webpack的详细指南，了解更多的配置选项和最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值