使用Webpack搭建乙個最基本的React環境

npm init

填寫好之後一路按回車，直到資料夾內生成 package.json 檔案，

在與package.json同級的目錄下新建乙個資料夾用於新建專案

由於node.js會自下而上的找包，所以我們把包安裝在最外層（也就是package.json同級目錄），讓node.js自己去找包，這樣我們就只用安裝一次包非常的方便。

npm i webpack webpack-cli webpack-dev-server -

dnpm i html-webpack-plugin html-loader -
d

npm i react react-dom -

d

npm i @babel/core @babel/preset-env @babel/runtime -

dnpm i @babel/plugin-transform-runtime -
dnpm i @babel/plugin-proposal-
class
-properties -
dnpm i @babel/preset-react -
dnpm i babel-loader -
d

在package.json同級目錄下建立資料夾，什麼名字都可以（這裡建立了乙個叫做react的資料夾）

在react資料夾下建立以下檔案

'這是乙個h1'

)reactdom.

render

(myh1,document.

getelementbyid()

)

const

=require
('path'
)const htmlwebpackplugin=
require
('html-webpack-plugin'
)const webpack=
require
('webpack'
)const addassethtmlwebpackplugin=
require
('add-asset-html-webpack-plugin'
)module.exports=
, module:,]
},plugins:
[new
htmlwebpackplugin()
,new
webpack.dllreferenceplugin()
,new
addassethtmlwebpackplugin([
,])]
, mode:
'production'
, devserver:
}

然後打包就完成了

執行結果：

由於沒有配置動態鏈結庫，所以每次打包webpack都會把react和react-dom打包到main.js檔案內，導致main.js檔案體積過大 影響打包速度

動態鏈結庫能夠把第三方資源單獨分離出來，減少打包體積

首先在package.json同級目錄安裝add-asset-html-webpack-plugin

npm i add-asset-html-webpack-plugin -

d

const

=require
('path'
)const webpack=
require
('webpack'
)module.exports=
, output:
, plugins:
[new
webpack.dllplugin()
],mode:
'production'
}

const

=require
('path'
)const htmlwebpackplugin=
require
('html-webpack-plugin'
)const webpack=
require
('webpack'
)const addassethtmlwebpackplugin=
require
('add-asset-html-webpack-plugin'
)module.exports=
, module:,]
},plugins:
[new
htmlwebpackplugin()
,new
webpack.dllreferenceplugin()
,new
addassethtmlwebpackplugin([
,])]
, mode:
'production'
, devserver:
}

這樣就會單獨將第三方資源進行打包了

打包體積非常小

main.js檔案只有1.2k

執行npx webpack-dev-server可以對專案進行實時除錯

使用WebPack從0搭建乙個基本Vue專案

執行 npm install webpack webpack cli d 命令，安裝 webpack 相關的包 在專案根目錄中，建立名為 webpack.config.js 的 webpack 配置檔案 在 webpack 的配置檔案中，初始化如下基本配置 module.exports 在 pack...

使用webpack4搭建乙個基於Vue的元件庫

組內負責的幾個專案都有一些一樣的公共元件，所以就著手搭建了個公共元件開發腳手架，第一次開發 library，所以是參考著 iview 的配置來搭建的。記錄如何使用webpack4搭建乙個library的腳手架。webpack4 搭建 vue 專案 使用 webpack4，需要安裝 webpack 和...

使用nodebb搭建乙個論壇

由於現在手頭上是mac，所以基於mac上搭建，下面講具體搭建過程。當然其他作業系統使用者可訪問 裡面除了mac，還有其他作業系統的搭建過程。希望大家學習愉快 言歸正傳 首先，安裝以下程式 用homebrew安裝 redis brew install redis在你的終端中輸入，啟動 redis re...