應該如何搭建webpack+react開發環境-js教程-PHP中文網

首頁

web前端

js教程

應該如何搭建webpack+react開發環境

php中世界最好的语言

May 28, 2018 pm 03:41 PM

web 開發

這次帶給大家應該如何搭建webpack react開發環境，搭建webpack react開發環境的注意事項有哪些，下面就是實戰案例，一起來看一下。

環境主要依賴版本

webpack@4.8.1
webpack-cli@2.1 .3
webpack-dev-server@3.1.4
react@16.3.2

babel-core@6.26.3

babel-preset-env@1.6.1

##bable-preset-react@6.24. 1

webpack安裝及設定

#1. 起步

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src

登入後複製

2.webpack-cliwebpack從4.x版本開始，需要同時安裝webpack，webpack-cli(此工具用於在命令列中執行webpack)。

npm install webpack webpack-cli --save-dev

登入後複製

3.wepback

設定檔

在專案根目錄新建webpack.config.js文件，此檔案為webpack執行核心檔案。

webpack.config.js 基本設定

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',              // 入口文件
  output: {                       // webpack打包后出口文件
    filename: 'app.js',               // 打包后js文件名称
    path: path.resolve(dirname, 'dist')  // 打包后自动输出目录
  }
}

登入後複製

package.json 檔案scripts設定

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

登入後複製

此時在命令列執行npm run build，就能執行webpack了，webpack會自動去找專案根目錄裡的webpack.config.js文件，執行打包。

npm run build
// webpack打包后的项目
├── dist
│  └── app.js       // 打包后的app.js
├── package.json
├── src
│  └── index.js      // 源目录入口文件
└── webpack.config.js

登入後複製

webpack.config.js module相關配置

webpack 視所有文件都為模組，圖片，css文件，字體等靜態資源都會打包進js文件，所以會需要用到loader文件，更多Loaders可以查詢網址，接下來我們再安裝一些必要的Loader檔。

npm install style-loader css-loader url-loader --save-dev

登入後複製

webpack.config.js加入module模組

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 }
}

登入後複製

引入loader後，就可以在你的src/index.js檔案import你想引入的css檔案或其他靜態資源。

cd src && touch main.css

登入後複製

src/index.js 檔案引入css

import "./main.css";

登入後複製

webpack.config.js plugins設定

主要的js檔案與靜態檔案都能成功打包成一個js檔案後，我們需要把這個js檔案放到html檔案裡，webpack插件***html-webpack-plugin***就是乾這個事兒的，它能自動產生一個html檔案並把我們打包好的js檔案放入html。

npm install html-webpack-plugin --save-dev

登入後複製

webpack.config.js 設定plugins

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
 ]
};

登入後複製

執行npm run build後，我們可以看到dist目錄多出一個index.html檔。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>name</title>
 </head>
 <body>
 // 打包后的app.js已经被自动插入了html文件
 <script type="text/javascript" src="app.js"></script></body>
</html>

登入後複製

到這裡，webpack最簡單、最基本的需求已經配置完畢。此時專案結構為：

├── dist            // 生产目录
│  ├── app.js
│  └── index.html
├── package.json
├── src            // 源目录
│  ├── index.js
│  └── main.css
└── webpack.config.js

登入後複製

安裝react

npm install react react-dom --save

登入後複製

安裝react，wepback轉換依賴

# React元件由JSX組成，瀏覽器無法辨識JSX，需要babel來轉換。

babel-croe 為babel核心檔案

#babel-preset-env 將ES6轉義成ES5

#babel-preset-react 將JSX轉義成js

babel-loader webpack的babe轉換

#複製程式碼

程式碼如下：

npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev

####.babelrc設定檔# ########在專案根目錄下新建.babelrc文件，此文件為bable核心配置，babel會自動在專案根目錄下識別。 ###

// .babelrc
{
 "presets": ["env", "react"]
}

登入後複製

###webpack babel-loader 設定###

// 在webpack.config.js 的modules.rules中加入此配置
{
 test: /\.(js|jsx)$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader'
 }
}

登入後複製

######html-webpack-plugin 範本設定#########我們知道react需要取得頁面一個根元素，然後render才會生效，我們可以新建一個html文件，讓html-webpack-plugin插件基於這個文件來進項打包。 ######所以我們在根目錄下新建一個html文件，以此文件作模板。 ###

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
    // react需要的渲染根元素
 <p id="root"></p>
</body>
</html>

登入後複製

###此時webpack.config.js設定:###

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  // 模板文件位置
 }) 
 ]
};

登入後複製

###書寫React，執行webpack###

// src/index.js
import React from 'react';
import ReactDom from 'react-dom';
import './main.css'
ReactDom.render(
 <h1>hello world</h1>,
 document.getElementById('root')
);

登入後複製

运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"hello world"。

dev环境热更新配置

react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。

安装webpack-dev-server

npm install webpack-dev-server --save-dev

登入後複製

webpack.config.js 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  
 }),
 // hot 检测文件改动替换plugin
 new webpack.NamedModulesPlugin(),   
 new webpack.HotModuleReplacementPlugin() 
 ],
    // webpack-dev-server 配置
 devServer: {
 contentBase: './dist',
 hot: true
 },
};

登入後複製

运行webpack-dev-server

在 package.json 文件加入 scripts 配置：

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},

登入後複製

命令行运行 npm run dev

可以在浏览器中输入localhost:8080 内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖，即实时在浏览器热更新看到。

至此，react的webpack的基础开发环境已全部配置完毕。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7792

Java教學

1644

CakePHP 教程

1401

Laravel 教程

1298

PHP教程

1234

Related knowledge

四款值得推薦的AI輔助程式工具 Apr 22, 2024 pm 05:34 PM

這個AI輔助程式工具在這個AI快速發展的階段，挖掘出了一大批好用的AI輔助程式工具。 AI輔助程式設計工具能夠提升開發效率、提升程式碼品質、降低bug率，是現代軟體開發過程中的重要助手。今天大姚給大家分享4款AI輔助程式工具（而且都支援C#語言），希望對大家有幫助。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI編碼助手，可幫助你更快、更省力地編寫程式碼，從而將更多精力集中在問題解決和協作上。 Git

AI程式設計師哪家強？探索Devin、通靈靈碼和SWE-agent的潛力 Apr 07, 2024 am 09:10 AM

2022年3月3日，距離世界首個AI程式設計師Devin誕生不足一個月，普林斯頓大學的NLP團隊開發了一個開源AI程式設計師SWE-agent。它利用GPT-4模型在GitHub儲存庫中自動解決問題。 SWE-agent在SWE-bench測試集上的表現與Devin相似，平均耗時93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內容，使用自動語法檢查、編輯特定行，以及編寫和執行測試。（註：以上內容為原始內容微調，但保留了原文中的關鍵訊息，未超過指定字數限制。）SWE-A

學習如何利用Go語言開發行動應用程式 Mar 28, 2024 pm 10:00 PM

Go語言開發行動應用程式教學隨著行動應用程式市場的不斷蓬勃發展，越來越多的開發者開始探索如何利用Go語言開發行動應用程式。作為一種簡潔高效的程式語言，Go語言在行動應用開發中也展現了強大的潛力。本文將詳細介紹如何利用Go語言開發行動應用程序，並附上具體的程式碼範例，幫助讀者快速入門並開始開發自己的行動應用程式。一、準備工作在開始之前，我們需要準備好開發環境和工具。首

五大熱門Go語言庫總表：開發必備利器 Feb 22, 2024 pm 02:33 PM

五大熱門Go語言庫總結：開發必備利器，需要具體程式碼範例Go語言自從誕生以來，受到了廣泛的關注和應用。作為一門新興的高效、簡潔的程式語言，Go的快速發展離不開豐富的開源程式庫的支援。本文將介紹五大熱門的Go語言庫，這些庫在Go開發中扮演了至關重要的角色，為開發者提供了強大的功能和便利的開發體驗。同時，為了更好地理解這些庫的用途和功能，我們會結合具體的程式碼範例進行講

Android開發最適合的Linux發行版是哪一個？ Mar 14, 2024 pm 12:30 PM

Android開發是一項繁忙而又令人興奮的工作，而選擇適合的Linux發行版來進行開發則顯得尤為重要。在眾多的Linux發行版中，究竟哪一個最適合Android開發呢？本文將從幾個方面來探討這個問題，並給出具體的程式碼範例。首先，我們來看看目前流行的幾個Linux發行版：Ubuntu、Fedora、Debian、CentOS等，它們都有各自的優點和特點。

如何從駕駛艙Web使用者介面啟用管理訪問 Mar 20, 2024 pm 06:56 PM

Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中，我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題：駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式：受限訪問：這是駕駛艙的默認訪問模式。在這種存取模式下，您無法從駕駛艙Web用戶

Go語言前端技術探秘：前端開發新視野 Mar 28, 2024 pm 01:06 PM

Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面

了解VSCode：這款工具到底是用來做什麼的？ Mar 25, 2024 pm 03:06 PM

《了解VSCode：這款工具到底是用來做什麼的？》身為程式設計師，無論是初學者或資深開發者，都離不開程式碼編輯工具的使用。在眾多編輯工具中，VisualStudioCode（簡稱VSCode）作為一款開源、輕量級、強大的程式碼編輯器備受開發者歡迎。那麼，VSCode到底是用來做什麼的呢？本文將深入探討VSCode的功能和用途，並提供具體的程式碼範例，以幫助讀者

See all articles

應該如何搭建webpack+react開發環境

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題