快速搭建 webpack + react 環(huán)境

孫淑建發(fā)布于2019-08-23 11:52 / 2850人閱讀

安裝

首先你需要點擊這里安裝 nodejs（npm）。然后執(zhí)行：

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" 看到渲染的頁面

服務器環(huán)境配置

修改或添加 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環(huán)境快速搭建php運行環(huán)境之wampserver webpack搭建快速部署環(huán)境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97604.html

從react-start到co源碼(一)

摘要：安裝這個預設主要包含了如下兩個插件實現熱加載捕獲中的方法并展現在界面上修改上述的文件文件通過上面的幾個步驟我們就大致完成了開發(fā)環(huán)境的基本搭建。應該在中進行配置以上就是簡單的環(huán)境搭建后面會推出后續(xù)的文章。 react作為當前十分流行的前端框架，相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事，必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發(fā)環(huán)境。主要...

gekylin 2019-08-20 13:44 評論0 收藏0
? 使用 Dawn 快速搭建 React 項目！

摘要：開發(fā)一個項目，通常避免不了要去配置和之類，以支持或模塊及各種新語法，及進行語法的轉義。當然也可以用腳手架快速創(chuàng)建一個項目，但與此同時常常又顯的不太自由。本文是一篇使用入門文章，介紹如何從零開始手動配置一個基于的工程。開發(fā)一個 React 項目，通常避免不了要去配置 Webpack 和 babel 之類，以支持 commonjs 或 es 模塊及各種 es 新語法，及進行 jsx 語法...

Ethan815 2019-08-21 16:49 評論0 收藏0
手把手教你從零搭建react局部熱加載環(huán)境

摘要：有沒有辦法實現就局部刷新呢當然是有第十步執(zhí)行為了實現局部熱加載，我們需要添加插件。前言用了3個多月的vue自認為已經是一名合格的vue框架api搬運工，對于vue的api使用到達了一定瓶頸，無奈水平有限，每每深入底層觀賞源碼時候都迷失了自己。遂決定再找個框架學習學習看看能否突破思維局限，加上本人早已對React、RN技術垂涎已久,于是決定找找教程來學習。無奈第一步就卡在了環(huán)境搭...

quietin 2019-08-21 17:23 評論0 收藏0
react基于webpack和Babel 6上的開發(fā)環(huán)境搭建

摘要：可能在項目正式上線的時候才需要發(fā)布配置單文件入口版本新建一個和開發(fā)環(huán)境不同的是，入口和出口。相應的在的源也要進行修改。加載模塊發(fā)布配置多文件模式庫最好就不要打包進來。因為一般庫都是不會改動的。所以這里就要進行庫的分離。 react-js開發(fā)環(huán)境時間：2016.3.19-12:29作者：三月懶驢基于：react版本：0.14基于：babel版本：6相關代碼：github 開始一個項目 ...

callmewhy 2019-08-19 18:01 評論0 收藏0
React項目實踐系列一

摘要：在此我們選用用友的公共靜態(tài)資源庫。因此打算建立遠程的其實還有個關鍵是我使用用友配的電腦開發(fā)，在本地部署的話電腦配置。。。不過此步驟我們也可以省略了，用友的大前端技術團隊提供了平臺。數據分析平臺-實踐系列一項目創(chuàng)建于2018年1月底，到現在已經接近半年，在此寫下半年來項目的實踐過程以及自己對前端的學習與體悟。技術選型框架： React 路由： React-Router 4 狀態(tài)管...

DC_er 2019-08-26 12:01 評論0 收藏0