手動建立簡單webpack專案及React使用

1、執行 npm init -y 快速初始化專案

2、在專案根目錄建立src的源**目錄和dist產品目錄

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

4、使用cnpm 下安裝 webpack, 執行cnpm i webpack webpack-cli -d

5、注意webpack 4.x 提供了約定大於配置的概念；目的是為了儘量減少配置檔案的體積；

1、執行 npm i react react-dom -s 安裝包

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

3、匯入包

import react from 'react'impotr reactdom  from 'react-dom'

4、建立虛擬dom元素：

//
引數1、建立的元素型別，字串，表示元素的名稱
//引數2：是乙個物件或null ，表示當前這個dom元素的屬性
//引數3：子節點（包括其他 虛擬dom 獲取文字節點）
//引數n：其他子節點
//const myh1 = react.createelement('h1', null, '這是乙個大h1')
const myh1 = react.createelement('h1', , '這是乙個大h1')

5、渲染

引數1:要渲染的那個虛擬的dom元素

//引數2:指定頁面上dom元素，當做的容器

//target container is not a dom element. 經過分析猜測:第二個引數接收的應該是個 dom元素而不是選擇器

什麼是jsx語法，就是符合 xml 的js 語法；（語法格式相對來說，要比html嚴謹很多）

執行 cnpm i babel-core babel-loader babel-puglin-transform-runtime -d

執行 cnpm i babel-preset-env babel-preset-stage-0 -d

安裝能夠識別jsx語法的包 cnpm i babel-preset-react -d

新增 .babelrc 配置檔案

新增 babel-loader 的配置項：

module: , //
千萬別忘記加 exclude排除項
]  }

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

我理解的是：babel-loader 版本太高不支援的原因，我就把版本裝回了 @7.1.5版本執行

在 npm run build 就成功了

附上簡單的webpack 配置

關於[email protected]出現錯誤原因已經找到,感謝@sky__zt的回答.

(忘了去看官方文件了)

官方預設babel-loader | babel 對應的版本需要一致: 即babel-loader需要搭配最新版本babel

具體請參考:《npm_babel-loader》

兩種解決方案:

回退低版本

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

更新到最高版本:

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

webpack專案建立步驟

1 在專案根目錄執行npm init y命令快速初始化專案 2 在專案根目錄建立 src 源目錄和 dist 產品目錄 3 在src目錄下建立index.html檔案 4 使用npm安裝webpack,webpack cli,執行如下命令即可 npm i webpack webpack cli d...

webpack建立vue專案

title webpack建立vue專案 tag webpack,vue,前端歡迎檢視我的部落格永無島 node v 10.4.0 npm v 6.1.0 檢視本專案原始碼請移步這裡新建專案目錄進入cmd,cmd目錄指定到專案目錄 mkdir myvuetest cd myvuetest 建...

手動建立Django專案

目標通過手動建立後，再用pycharm開啟配置虛擬環境 pyenv activate py3 進入到我建立的django虛擬環境如果python未生效，可以試試 source pyenv versions py3 bin activate pip3 install django 安裝djang...

手動建立簡單webpack專案及React使用

webpack專案建立步驟

webpack建立vue專案

手動建立Django專案

相關推薦