webpack搭建React項目（1）

時間 2021-08-14

標籤 html node react webpack web json 瀏覽器 babel app dom 欄目 React 简体版

原文原文鏈接

配置 webpack

webpack 介紹

根據webpack官網的解釋來講，webpack是一個現代 JS 應用的 bundler，翻譯過來就是打包器。webpack會根據模塊之間的依賴最終合併模塊造成一個或者多個 bundles。html

安裝 webpack 腳手架，以及命令行工具node

yarn init

yarn global add webpack webpack-cli複製代碼

修改項目目錄

添加 dist 文件夾，在 dist 文件夾添加一個index.html文件，插入<script>腳本；一方面，單頁面應用都須要一個基礎的 html 頁面；另外一方面，由於 webpack 只能識別 js 和 json 文件，因此 html 文件須要手動添加到輸出目錄，放在其它文件夾裏也行，好比public/index.html，不過這時候引入<script>的src屬性要和 webpack 打包輸出的目錄路徑相匹配才行。react

<!DOCTYPE html><html lang="zh-hans">
  <head><meta charset="utf-8" /><title>toycra</title>
  </head>
  <body><div id="root"></div><script src="main.js"></script>
  </body></html>複製代碼

添加 src 文件夾，在 src 文件夾下新建index.js文件做爲 webpack 啓動的入口文件；webpack

var p = document.createElement('p');
p.innerText = 'test';var root = document.getElementById('root');
root.appendChild(p);複製代碼

修改 webpack 配置

新建一個webpack.config.js配置文件，配置項目入口和輸出目錄。entry的默認值其實就是./src/index.js，而output的默認值也是./dist/main.js。web

webpack 自己遵循 CommonJS 模塊規範，因此使用require導入模塊，module.exports導出模塊。json

__dirname表示當前模板的目錄名，用在webpack.config.js這個文件裏，也就是項目的根目錄，path.resolve根據傳入的路徑從右往左構造絕對路徑值，最終結果就是/dist。也能夠直接寫成本地的絕對路徑值，可是這樣在共享代碼的時候會帶來困難。瀏覽器

const path = require('path');module.exports = {  entry: './src/index.js',  output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),
  },
};複製代碼

測試 webpack 打包

執行webpack命令之後，在終端看到這樣的提示就表示打包成功，接下來能夠去dist目錄找index.html使用瀏覽器打開，看到 html 頁面根據 js 腳本寫入的片斷就完成了 webpack 初始化階段配置。babel

配置 React

安裝 React 基礎庫

先安裝 React 的基本組件庫。app

yarn add react react-dom複製代碼

安裝 babel

Babel 是什麼？dom

根據 babel 官網的介紹，Babel 主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。

Babel 提供的有各類plugin用於轉換不一樣的語法，plugin的存在讓 Babel 能夠輕鬆地應對本地高版本的 ES 代碼，若是你想使用最新的 ES 語法，須要引入對應的plugin來轉換，例如你只想轉換代碼中的箭頭函數，可使用@babel/plugin-transform-arrow-functions。

同時 Babel 還提供preset的功能，將一些plugin集合起來，經過一個簡單的presets配置，就可使用一些plugin的功能，可是presets同時引入多個plugin，裏面極可能存在不須要的plugin配置，從而致使性能上的損失。

因此根據 Babel 官網的指示，安裝相關組件：

@babel/core：Babel 的核心模塊，將其餘 Babel 的核心代碼封裝到一塊，用於和其餘插件進行集成開發；例如將源代碼轉換成 AST，AST 是代碼的抽象語法樹，相似於一個 JSON 同樣的樹狀結構，方便 Babel 的插件來解析 AST 進行代碼轉換
@babel/preset-env：負責將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法
@babel/preset-react：負責轉換 React 的 JSX 代碼，以及支持 React 的 API 的命名，例如React.createxxx等內容

yarn add @babel/core @babel/preset-env @babel/preset-react -D複製代碼

安裝 babel-loader

yarn add babel-loader -D複製代碼

使用 webpack 的 loader，須要熟悉如下幾部份內容：

webpack 的 loader 是什麼 —— 概念 - loader
webpack 的 loader 如何配置 —— module.rules
babel-loader的配置方式 —— babel-loader

簡而言之，loader 爲 webpack 提供了處理除.js，.json之外其它全部代碼的功能，而babel-loader就是許多 loader 的其中之一，提供在 webpack 打包過程當中調用 Babel 代碼來處理 React，ECMAScript 2015+ 等相關代碼的功能。

webpack 官方對 loader 的配置提供了三種方式，而且推薦使用配置文件在module.rules中指定 loader，這種方式將配置和代碼分離，使得項目層次更加分明，維護也更方便。

如下按照推薦的方式在module.rules中配置babel-loader 。

module: {  rules: [
    {      test: /\.m?jsx?$/,
      exclude: /(node_modules)/,
      use: {loader: 'babel-loader',options: {          presets: ['@babel/preset-env', '@babel/preset-react'],          // 若是在class組件中使用屬性或者箭頭函數之類的語法，必需要引入這個plugin  plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
    },
  ];
}複製代碼

測試 JSX 編寫

在 src 目錄下新建一個test.jsx文件，根據 React 的語法來編寫一個組件

import React, { Component } from 'react';export default class extends Component {  render() {return <p>測試</p>;
  }
}複製代碼

在以前的index.js中引入組件，並經過ReactDOM.render渲染到頁面中

import React from 'react';import ReactDOM from 'react-dom';import TestComponent from './test.jsx';

ReactDOM.render(<TestComponent />, document.getElementById('root'));複製代碼

執行webpack打包看一下dist目錄的輸出文件，若是不出意外就能看到頁面root節點已經渲染出了組件中的<p>元素