react+webpack5搭建環境

語言: CN / TW / HK
ead>

theme: channing-cyan highlight: github


前言

工作中用到,練習搭建react + webpack5環境

計劃是這樣的:

  • 建立一個基本專案結構

  • 針對不同資源進行分別處理

  • 對開發環境和生產環境有差異化的配置分開不同配置檔案,公共部分放一塊


準備一個基本npm專案

  1. 新建一個目錄 react-webpack5-template,初始化並安裝 webpack-cli

bash mkdir react-webpack5-template cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev

  • webpack-cli: 在命令列中執行 webpack 的工具

  • --save-dev: 開發環境依賴,開發時會用到,自動把模組和版本號新增到devDependencies部分

  • 按以下結構建立檔案

react-webpack5-template   |- config     |- webpack.base.config.js // webpack 基本配置     |- webpack.dev.config.js // webpack 開發環境配置     |- webpack.prod.config.js  // webpack 生產環境配置 |- node-modules //初始化時自動建立 |- public     |- index.html |- /src |- index.js //入口檔案     |- app.js //第一個元件     |- app.css |- package.json //初始化時自動建立 |- package-lock.json //初始化時自動建立

index.html

```html

react-webpack5

```

index.js

```jsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './app';

ReactDOM.render(, document.getElementById('root')); ```

app.js

```jsx import React, { Component } from 'react'; import './app.css';

class App extends Component { render() { return (

第一
); } }

export default App; ```

app.css

css .app { background-color: blue; }

好的,專案初始結構就這樣子。

基本配置

安裝react

bash npm install --save react react-dom

  • 可以使用類似 npm install --save [email protected] [email protected] 安裝指定版本,其他包同理

  • --save 是專案依賴,專案執行時必須的依賴,自動把模組和版本號新增到dependencies部分

新增webpack.base.config.js配置

```js const path = require('path');

module.exports = { entry: { index: './src/index.js', }, output: { filename: 'js/bundle.js', path: path.resolve(__dirname, '../dist') } } ```

  • entry配置入口檔案

  • output 配置打包生成檔案

到這裡專案還不能跑,因為webpack不認識 react 的 jsx語法, 需要安裝 babel 進行預處理

配置js打包

安裝 Babel (處理js/jsx等檔案)

Babel 是一個工具鏈,主要用於在當前和舊的瀏覽器或環境中,將 ECMAScript 2015+ 程式碼轉換為 JavaScript 向後相容版本的程式碼。以下是 Babel 可以做的主要事情:

  • 轉換語法為html檔案中引入的外部資源如scriptlink動態新增每次compile後的hash,防止引用快取的外部檔案問題

  • Polyfill 目標環境中缺少的功能(通過如 core-js 的第三方 polyfill

  • 原始碼轉換(codemods)

  • 以及更多!

  • 可以生成建立html入口檔案,比如單頁面可以生成一個html檔案入口,配置Nhtml-webpack-plugin可以生成N個頁面入口

bash npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-runtime

  • babel-loader:通過babel 處理 JavaScript 檔案。
  • @babel/core:babel 的核心模組
  • @babel/preset-env:預設轉譯 ES6語法到ES5
  • @babel/preset-react:轉換 JSX 為函式
  • @babel/plugin-proposal-class-properties:支援類屬性
  • @babel/plugin-proposal-object-rest-spread:支援物件展開
  • @babel/plugin-transform-runtime:不汙染全域性變數,程式碼複用和減少打包體積

在webpack.base.config.js 中新增對應配置:

```js const path = require("path");

module.exports = { entry: { index: "./src/index.js", }, output: { filename: "js/bundle.js", path: path.resolve(__dirname, "../dist"), }, module: { rules: [ { //babel 處理對應檔案 test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], plugins: [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties", ], }, }, }, ], }, }; ```

配置html打包

安裝 HtmlWebpackPlugin

HtmlWebpackPlugin簡化了HTML檔案的建立,以便為你的webpack包提供服務。

  • 為html檔案中引入的外部資源如scriptlink動態新增每次compile後的hash,防止引用快取的外部檔案問題

  • 可以生成建立html入口檔案,比如單頁面可以生成一個html檔案入口,配置Nhtml-webpack-plugin可以生成N個頁面入口

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

新增對應配置到 webpack.base.config.js

```js const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { entry: { index: "./src/index.js", }, output: { filename: "js/bundle.js", path: path.resolve(__dirname, "../dist"), }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], plugins: [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties", ], }, }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: "public/index.html", filename: 'index.html', inject: "body", hash: false, }), ], }; ```

  • template: 基於給的html檔案為模板生成html檔案

  • filename:打包後生成的檔名稱

  • inject:將 js 檔案注入到 body 底部

  • hash:如果是true,則會在html中引入的css和script檔名後自動新增一串hash字元類似這樣:<script defer="defer" src="js/bundle.js?49ca999d5677fd86f6d1"></script>

配置樣式資源打包

  1. 安裝處理 css 樣式檔案的外掛

style-loader 通過