手動建立簡單webpack項目及React使用

1、建立基本的webpack4.x項目

一、運行 npm init -y 快速初始化項目

二、在項目根目錄建立src的源代碼目錄和dist產品目錄

三、在src目錄下建立 index.html

四、使用cnpm 下安裝 webpack, 運行cnpm i webpack webpack-cli -D

• 如何安裝 cnpm 全局運行npm i cnpm -g

五、注意webpack 4.x 提供了 約定大於配置的概念；目的是爲了儘可能減小配置文件的體積；

• 默認約定了;
• 打包的入口是src -> index.js
• 打包的輸出文件是dist ->main.js
• 4.x中新增了mode 選項（爲必選項），可選的值爲：development 和 production；

2、在項目中使用react

一、運行 npm i react react-dom -S 安裝包

• react 專門用於建立組件，同時組件的生命週期都在這個包中
• react-dom ：專門進行DOM操做你的，最主要的應用場景，就是ReactDOM.render()

二、在index.html 頁面中，建立容器

<!-- 容器，未來，使用 React 建立虛擬DOM元素，都會被渲染到這個指定的容器中 -->
<div id='app'></div>

三、導入包

import React from 'react'
impotr ReactDOM  from 'react-dom'

四、建立虛擬DOM元素：

// 參數一、建立的元素類型，字符串，表示元素的名稱
// 參數2：是一個對象或null ，表示當前這個DOM元素的屬性
// 參數3：子節點（包括其餘 虛擬DOM 獲取文本節點）
// 參數n：其餘子節點

// const myh1 = React.createElement('h1', null, '這是一個大H1')
const myh1 = React.createElement('h1', {id: 'myh1', title: 'this is h1'}, '這是一個大H1')

五、渲染

// 參數1:要渲染的那個虛擬的DOM元素
// 參數2:指定頁面上DOM元素，當作的容器
ReactDOM.render(myh1, document.getElementById('app'))
//  Target container is not a DOM element. 通過分析猜想:第二個參數接收的應該是個 DOM元素而不是選擇器

 3、JSX語法

什麼是JSX語法，就是符合 xml 的js 語法 ；（語法格式相對來講，要比HTML嚴謹不少）

• 如何啓動 JSX語法呢安裝babel

1. 運行 cnpm i babel-core babel-loader babel-puglin-transform-runtime -D
2. 運行 cnpm i babel-preset-env babel-preset-stage-0 -D
3. 安裝可以識別jsx語法的包  cnpm i babel-preset-react -D
4. 添加 .babelrc 配置文件

   {
     "presets": ["env", "stage-0", "react"],
     "plugins": ["transform-runtime"]
   }

5. 添加 babel-loader 的配置項：

   module: { // 全部第三方 模塊的配置規則
       rules: [ // 第三方匹配規則
         { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千萬別忘記加 exclude排除項
       ]
     }

    

注意：在配置webpack.config.js自動打包的時候,出現Error: Cannot find module '@babel/core'錯誤

我理解的是：babel-loader 版本過高不支持的緣由，我就把版本裝回了 @7.1.5版本 執行

在 npm run build 就成功了

附上簡單的webpack 配置

關於babel-loader@8.0.5出現錯誤緣由已經找到,感謝@Sky__zt的回答.
(忘了去看官方文檔了)

官方默認babel-loader | babel 對應的版本須要一致: 即babel-loader須要搭配最新版本babel

具體請參考:《npm_babel-loader》

總結:

兩種解決方案:

1. 回退低版本

npm install -D babel-loader@7 babel-core babel-preset-env

1. 更新到最高版本:

npm install -D babel-loader @babel/core @babel/preset-env webpack