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

2022-05-14 02:39:45 字數 2070 閱讀 3469

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