快速搭建 webpack + react 环境

孙淑建发布于2019-08-23 11:52 / 2848人阅读

安装

首先你需要点击这里安装 nodejs（npm）。然后执行：

mkdir react-webpack
cd react-webpack/
npm init

安装相关组件

这里包括了本文所需要的全部组件

npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-plugin-react-transform css-loader style-loader less less-loader react-transform-catch-errors redbox-react --registry=https://registry.npm.taobao.org

下面简单说明上述组件功能

react: react基础组件

react-dom: react 操作 DOM 组件

react-transform-hmr: hot module reloading 为热替换依赖插件

webpack: webpack 基础组件

webpack-dev-server: webpack 服务器组件

babel-core: babel 核心组件

babel-loader: 转码工具

babel-preset-react: 支持 react 转码

babel-preset-es2015: 支持 ES6 转码

babel-plugin-react-transform: 实现 babel 热替换

css-loader: 对 css 文件进行打包

style-loader: 将样式添加进 DOM 中

less: less 语法支持

less-loader: 对 less 文件进行打包

react-transform-catch-errors: 将错误显示在浏览器中

redbox-react: 渲染插件，配合上一个使用显示错误

hello world

建立如下目录结构(图中不包括 node_modules 目录，实际项目中必须保留，下同)

其中 webpack.config.js 内容如下

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

module.exports = {
  devtool: "eval-source-map",   //开启 soursemap
  entry: path.resolve(__dirname, "./src/index.js"),  //指定入口
  output: {      //设置输出路径
    path: path.resolve(__dirname, "./build"),
    filename: "index.js"
  },
  module: {    //设置 babel 模块
    loaders: [{
      test: /.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }]
  },
  plugins: [    //加载插件
    new webpack.HotModuleReplacementPlugin() //热模块替换插件
  ]
};

其中 .babelrc 内容如下：

{
  "presets": [
    "react",
    "es2015"
  ]
}

其中 src/index.js 内容如下：

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

ReactDOM.render(
  Hello World,
  document.getElementById("root")
);

其中 build/index.html 内容如下：




  
  demo

修改 package.json 中的 scripts 部分如下：

"scripts": {
  "build": "webpack"
}

而后运行 "npm run build" 运行在本地 "./build/index.html" 看到渲染的页面

服务器环境配置

修改或添加 webpack.config.js 中以下部分：

entry: ["webpack/hot/dev-server", path.resolve(__dirname, "./src/index.js")],  //指定入口
devServer: {   //配置本地服务器
  contentBase: "./build",
  colors: true,
  historyApiFallback: true,
  inline: false,
  port: 4444,
  process: true
}

修改 package.json 中的 scripts 部分如下：

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server"
}

而后运行 "npm run dev" 运行在本地 "http://localhost:4444/" 看到渲染的页面


## 配置 css 和 less

在 ./src/ 中添加 index.less 和 font.css，分别写入以下内容测试功能

/ index.less /
h1 {
background-color: red;
}
/ font.css /
h1 {
color: yellow;
}

修改 webpack.config.js 部分：

module: { //设置 babel 模块
loaders: [{

test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"

},{

test: /.css$/,
loader: "style-loader!css-loader"

},{

test: /.less$/,
loader: "style-loader!css-loader!less-loader"

}]
}

修改 src/index.js 如下：

import React from "react";
import ReactDOM from "react-dom";
import "./font.css";
import "./index.less";

ReactDOM.render(

Hello World

,
document.getElementById("root")
);

然后重启运行(由于修改了 webpack.config.js，不能使用热替换)页面可以看到相关样式

GPU云服务器云服务器 linux 快速搭建java环境快速搭建php运行环境之wampserver webpack搭建快速部署环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97604.html

从react-start到co源码(一)

摘要：安装这个预设主要包含了如下两个插件实现热加载捕获中的方法并展现在界面上修改上述的文件文件通过上面的几个步骤我们就大致完成了开发环境的基本搭建。应该在中进行配置以上就是简单的环境搭建后面会推出后续的文章。 react作为当前十分流行的前端框架，相信很多前端er都有蠢蠢欲动的学习它的想法。工欲善其事，必先利其器。这篇文章就简单的给大家介绍一下如何我快速的搭建一个react前端开发环境。主要...

gekylin 2019-08-20 13:44 评论0 收藏0
? 使用 Dawn 快速搭建 React 项目！

摘要：开发一个项目，通常避免不了要去配置和之类，以支持或模块及各种新语法，及进行语法的转义。当然也可以用脚手架快速创建一个项目，但与此同时常常又显的不太自由。本文是一篇使用入门文章，介绍如何从零开始手动配置一个基于的工程。开发一个 React 项目，通常避免不了要去配置 Webpack 和 babel 之类，以支持 commonjs 或 es 模块及各种 es 新语法，及进行 jsx 语法...

Ethan815 2019-08-21 16:49 评论0 收藏0
手把手教你从零搭建react局部热加载环境

摘要：有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载，我们需要添加插件。前言用了3个多月的vue自认为已经是一名合格的vue框架api搬运工，对于vue的api使用到达了一定瓶颈，无奈水平有限，每每深入底层观赏源码时候都迷失了自己。遂决定再找个框架学习学习看看能否突破思维局限，加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...

quietin 2019-08-21 17:23 评论0 收藏0
react基于webpack和Babel 6上的开发环境搭建

摘要：可能在项目正式上线的时候才需要发布配置单文件入口版本新建一个和开发环境不同的是，入口和出口。相应的在的源也要进行修改。加载模块发布配置多文件模式库最好就不要打包进来。因为一般库都是不会改动的。所以这里就要进行库的分离。 react-js开发环境时间：2016.3.19-12:29作者：三月懒驴基于：react版本：0.14基于：babel版本：6相关代码：github 开始一个项目 ...

callmewhy 2019-08-19 18:01 评论0 收藏0
React项目实践系列一

摘要：在此我们选用用友的公共静态资源库。因此打算建立远程的其实还有个关键是我使用用友配的电脑开发，在本地部署的话电脑配置。。。不过此步骤我们也可以省略了，用友的大前端技术团队提供了平台。数据分析平台-实践系列一项目创建于2018年1月底，到现在已经接近半年，在此写下半年来项目的实践过程以及自己对前端的学习与体悟。技术选型框架： React 路由： React-Router 4 状态管...

DC_er 2019-08-26 12:01 评论0 收藏0