從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟

更新時間：2018年05月18日 10:02:03 作者：會寫代碼的husky

這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

環(huán)境主要依賴版本

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. 起步

新建項目目錄，初始化npm，新建開發(fā)源目錄

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

2.webpack-cli

webpack從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，就能執(zhí)行webpack了，webpack會自動去找項目根目錄里的webpack.config.js文件，執(zhí)行打包。

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

webpack.config.js module相關配置

webpack 視所有文件都為模塊，圖片，css文件，字體等靜態(tài)資源都會打包進js文件，所以會需要用到loader文件，更多Loaders可以查詢網(wǎng)址，接下來我們安裝一些必要的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文件或者其他靜態(tài)資源。

cd src && touch main.css

src/index.js 文件引入css

import "./main.css";

webpack.config.js plugins配置

主要的js文件和靜態(tài)文件都能成功打包成一個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
 ]
};

執(zhí)行npm run build后，我們可以看到dist目錄多出一個index.html文件。

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

到這里，webpack最簡單最基本的需求已經(jīng)配置完畢。此時項目結(jié)構(gòu)為：

├── dist            // 生產(chǎn)目錄
│  ├── app.js
│  └── index.html
├── package.json
├── src            // 源目錄
│  ├── index.js
│  └── main.css
└── webpack.config.js

React 的webpack配置

安裝react

npm install react react-dom --save

安裝react，wepback轉(zhuǎn)換依賴

React組件由JSX組成，瀏覽器無法識別JSX，需要babel進行轉(zhuǎn)換。

babel-croe 為babel核心文件
babel-preset-env 將ES6轉(zhuǎn)義成ES5
babel-preset-react 將JSX轉(zhuǎn)義成js
babel-loader webpack的babe轉(zhuǎn)換

復制代碼代碼如下:

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需要的渲染根元素
 <div id="root"></div>
</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文件，可以發(fā)現(xiàn)瀏覽器已正常渲染"hello world"。

dev環(huán)境熱更新配置

react的wepack完成以后，是不是發(fā)現(xiàn)每修改一次代碼，想看到效果，得重新打包一次才行。webpack-dev-server配置可以幫助我們實現(xiàn)熱更新，在開發(fā)環(huán)境解放我們的生產(chǎn)力。

安裝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 內(nèi)容即為dist目錄下的index.html內(nèi)容。修改src/index.js中的內(nèi)容或者依賴，即實時在瀏覽器熱更新看到。

至此，react的webpack的基礎開發(fā)環(huán)境已全部配置完畢。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實用價值，需要的朋友可以參考下
2017-12-12
React Router V5:使用HOC組件實現(xiàn)路由攔截功能
這篇文章主要介紹了React Router V5:使用HOC組件實現(xiàn)路由攔截功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-03-03
react中JSX的注意點詳解
這篇文章主要為大家詳細介紹了react中JSX的注意點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
React中refs的一些常見用法匯總
Refs是一個獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關于React中refs的一些常見用法,需要的朋友可以參考下
2021-07-07
react使用useImperativeHandle示例詳解
這篇文章主要為大家介紹了react使用useImperativeHandle示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
使用react+redux實現(xiàn)彈出框案例
這篇文章主要為大家詳細介紹了使用react+redux實現(xiàn)彈出框案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
react實現(xiàn)全局組件確認彈窗
這篇文章主要為大家詳細介紹了react實現(xiàn)全局組件確認彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
Redux saga異步管理與生成器詳解
這篇文章主要介紹了Redux saga異步管理與生成器，工作中使用了redux-saga這個redux中間件，如果不明白內(nèi)部原理使用起來會讓人摸不著頭腦，閱讀源碼后特意對其原理做下總結(jié)
2023-02-02
關于react-router的幾種配置方式詳解
本篇文章主要介紹了關于react-router的幾種配置方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
解決React報錯Style prop value must be a
這篇文章主要為大家介紹了React報錯Style prop value must be an object解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12