Webpack搭建React開發環境詳細步驟

本文轉載自查看原文 2020-03-05 17:53 9155

1.安裝node.js

　　Webpack實際是用Node.js寫的，所以要先安裝Node.js環境。而且Node.js中集成了NPM包管理，我們在后面用到的很多模塊都需要使用NPM下載。

　　首先進入Node.js的官網：https://nodejs.org/zh-cn/download/，選擇對應系統下載安裝包，對於 windows 用戶，直接下載安裝包安裝即可，如果是 Macos 用戶，推薦使用 brew 進行安裝。Node.js有很多版本，包括穩定版和開發版，不同的項目需要的Node.js版本不同，推薦大家安裝 8.x 以上的版本。
2.安裝webpack的步驟如下：

　1.創建React項目的文件夾，在項目根目錄下打開命令提示符，執行初始化命令，生成package.json文件(如果已經安裝了cnpm的話，可以使用cnpm代替npm,執行指令)：

1 cnpm init -y

　2.安裝react和react-dom依賴(注：install可以簡寫成i)

　　a.安裝react

1 cnpm install react -S

　　b.安裝react-dom

1 cnpm install react-dom -S

　3.安裝webpack和webpack-cli開發依賴

　　a.安裝webpack

cnpm install webpack -D

　　b.安裝webpack-cli

cnpm install webpack-cli -D

　4.安裝babel和babel preset-react

　　a.安裝babel

cnpm i babel-loader @babel/core @babel/preset-env -D

　　b.安裝 babel preset-react

cnpm i @babel/preset-react -D

　以上的指令執行之后的package.json文件是：

　5.在react項目的文件夾下創建webpack.config.js文件，並在配置文件中添加對JSX語法的Babel編譯支持：

 1 module.exports = {
 2     resolve: {
 3         extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
 4     },
 5     module: {
 6         rules: [
 7             {
 8                 test: /\.jsx?$/, // jsx/js文件的正則
 9                 exclude: /node_modules/, // 排除 node_modules 文件夾
10                 use: {
11                     // loader 是 babel
12                     loader: 'babel-loader',
13                     options: {
14                         // babel 轉義的配置選項
15                         babelrc: false,
16                         presets: [
17                             // 添加 preset-react
18                             require.resolve('@babel/preset-react'),
19                             [require.resolve('@babel/preset-env'), {modules: false}]
20                         ],
21                         cacheDirectory: true
22                     }
23                 }
24             }
25         ]
26     }
27 };

　6.在項目根目錄創建 src/index.js文件，src是源文件目錄，index.js文件內容如下：

1 import React from 'react'
2 import ReactDOM from 'react-dom'
3 
4 ReactDOM.render(
5     <div>hello  webpack !!!</div>
6     , document.getElementById("root"))

　7.將index.js文件添加到webpack.config.js中的entry：

1 module.exports = {
2     entry: './src/index.js',
3     // ...
4 };

　8.在項目根目錄創建 public/index.html文件,public是源文件目錄,index.html文件內容如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>webpack練習</title>
 7 </head>
 8 <body>
 9     <div id="root"></div>
10 </body>
11 </html>

　9.需要使用 html-webpack-plugin 插件來復制 public/index.html 到 dist 文件夾下,指令是：

cnpm i html-webpack-plugin -D

　10.修改webpack.config.js文件的配置：

 1 const HtmlWebPackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     // ...
 4     plugins: [
 5         new HtmlWebPackPlugin({
 6             template: 'public/index.html',
 7             filename: 'index.html',
 8             inject: true
 9         })
10     ]
11 };

　11.上面的操作都完成之后，可以執行打包命令：

npx webpack --mode development

　　如果出現下面的情況，就證明在react項目下自動生成了一個dist的文件夾，里面存放的是webpack編譯打包后的文件

　　這時在package.json文件中配置以下的內容：

1 {
2     "scripts": {
3         "build": "webpack --mode production"
4     }
5 }

　12.配置好了以后，我們就可以使用簡化的命令來操作打包了：

npm run build

　　如果出現下面的內容，打包成功了

3.配置React項目的本地服務

　　我們可以基於Node.js的Express搭建一個本地服務器，通過Express的中間件 webpack-dev-middleware 來實現與 Webpack的交互。

（1）配置服務，需要以下四步：

　　第一步：安裝webpack-dev-server依賴：

cnpm i webpack-dev-server -D

　　第二步：在webpack.config.js配置文件中添加服務相關配置，完整配置如下：

 1 //webpackage.config.js
 2 
 3 const path = require('path');
 4 const HtmlWebPackPlugin = require('html-webpack-plugin');
 5 module.exports = {
 6     mode: 'development',
 7     devtool: 'cheap-module-source-map',
 8     devServer: {
 9         contentBase: path.join(__dirname, './src/'),
10         publicPath: '/',
11         host: '127.0.0.1',
12         port: 3000,
13         stats: {
14             colors: true
15         }
16     },
17     entry: './src/index.jsx',
18     // 將 jsx 添加到默認擴展名中，省略 jsx
19     resolve: {
20         extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
21     },
22     module: {
23         rules: [
24             {
25                 test: /\.jsx?$/, // jsx文件的正則
26                 exclude: /node_modules/, // 排除 node_modules 文件夾
27                 use: {
28                     // loader 是 babel
29                     loader: 'babel-loader',
30                     options: {
31                         // babel 轉義的配置選項
32                         babelrc: false,
33                         presets: [
34                             // 添加 preset-react
35                             require.resolve('@babel/preset-react'),
36                             [require.resolve('@babel/preset-env'), {modules: false}]
37                         ],
38                         cacheDirectory: true
39                     }
40                 }
41             }
42         ]
43     },
44     plugins: [
45         new HtmlWebPackPlugin({
46             template: 'public/index.html',
47             filename: 'index.html',
48             inject: true
49         })
50     ]
51 };

　　第三步：修改package.json文件的scripts配置，添加start字段

1 {
2     "scripts": {
3         "build": "webpack --mode production",
4         "start": "webpack-dev-server --mode development --open"
5     }
6 }

　　第四步：執行啟動服務命令：

npm start

　　之后在瀏覽器上會出現：

（2）配置熱加載（意思是，配置成功后，可以自動刷新）,有三步：

　　第一步：在src目錄中新建dev.js文件，添加以下代碼：

1 if (module.hot) {
2     module.hot.accept(err => {
3         if (err) {
4             console.error('Cannot apply HMR update.', err);
5         }
6     });
7 }

　上面代碼用於觸發HMR，這部分代碼不屬於業務代碼。　　

　　第二步：在webpack.config.js配置文件中添加熱加載配置：

 1 // webpack.config.dev.js
 2 
 3 const webpack = require('webpack'); //增加導入webpack
 4 
 5 module.exports = {
 6     devServer: {
 7         ...
 8         hot: true, //在devServer中增加hot字段
 9         ...
10     },
11     ...
12     entry: ['./src/index.jsx', './src/dev.js'], //在entry字段中添加觸發文件配置
13     ...
14     plugins: [
15         // plugins中增加下面內容，實例化熱加載插件
16         new webpack.HotModuleReplacementPlugin(),
17     ...
18     ]
19     ...
20 }

　　第三步：啟動服務，測試熱加載

npm start

　　可以自動刷新

以下的代碼，可以讓我們檢查，看看是哪一點沒有或者忘記配置（這只是一個參考,還需要自己動手來操作）

　　a.這是webpack.config.js的文件內容：

 1 const path = require('path');
 2 const HtmlWebPackPlugin = require('html-webpack-plugin');
 3 const webpack = require('webpack'); //增加導入webpack
 4 module.exports = {
 5     mode: 'development',
 6     devtool: 'cheap-module-source-map',
 7     devServer: {
 8         hot: true, //在devServer中增加hot字段
 9         contentBase: path.join(__dirname, './src/'),
10         publicPath: '/',
11         host: '127.0.0.1',
12         port: 3000,
13         stats: {
14             colors: true
15         }
16     },
17     entry:['./src/index.js', './src/dev.js'], //在entry字段中添加觸發文件配置
18     resolve: {
19         extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
20     },
21     module: {
22         rules: [
23             {
24                 test: /\.jsx?$/, // jsx/js文件的正則
25                 exclude: /node_modules/, // 排除 node_modules 文件夾
26                 use: {
27                     // loader 是 babel
28                     loader: 'babel-loader',
29                     options: {
30                         // babel 轉義的配置選項
31                         babelrc: false,
32                         presets: [
33                             // 添加 preset-react
34                             require.resolve('@babel/preset-react'),
35                             [require.resolve('@babel/preset-env'), {modules: false}]
36                         ],
37                         cacheDirectory: true
38                     }
39                 }
40             }
41         ]
42     },
43     plugins: [
44         // plugins中增加下面內容，實例化熱加載插件
45         new webpack.HotModuleReplacementPlugin(),
46         new HtmlWebPackPlugin({
47             template: 'public/index.html',
48             filename: 'index.html',
49             inject: true
50         })
51     ]
52 };

　　b.這是package.json文件內容：

 1 {
 2   "name": "webpack_exercise",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "build": "webpack --mode production",
 9     "start": "webpack-dev-server --mode development --open"
10   },
11   "keywords": [],
12   "author": "",
13   "license": "ISC",
14   "dependencies": {
15     "react": "^16.13.0",
16     "react-dom": "^16.13.0"
17   },
18   "devDependencies": {
19     "@babel/core": "^7.8.7",
20     "@babel/preset-env": "^7.8.7",
21     "@babel/preset-react": "^7.8.3",
22     "babel-loader": "^8.0.6",
23     "html-webpack-plugin": "^3.2.0",
24     "webpack": "^4.42.0",
25     "webpack-cli": "^3.3.11",
26     "webpack-dev-server": "^3.10.3"
27   }
28 }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React + webpack 快速搭建開發環境搭建 webpack + React 開發環境 eclipse搭建android開發環境詳細步驟如何從零搭建一個webpack+react+redux+react-redux的開發環境一入門初探webpack之從零搭建Vue開發環境 TypeScript + Webpack 4 開發環境搭建(轉) webpack+angular2開發環境搭建搭建Android開發環境簡要步驟 React項目開發環境搭建 React Native開發環境搭建