Element原始碼:專案初始化和webpack配置

Anduril發表於2021-04-14
原始碼Web

0x00.專案初始化

由於整個過程畫素級 copy element，所以將不使用vue-cli初始化專案。

建立專案

新建一個空的資料夾，使用npm init 來初始化專案，並安裝vue模組。

carbon (17).png

修改目錄結構

根目錄中新增資料夾

carbon (18).png

根目錄下建立專案配置檔案: .gitignore README.md
public目錄下，建立模板頁檔案: favicon.ico index.html
examples目錄下，建立示例入口檔案: App.vue main.js logo.png

0x01.wepack安裝與配置

專案使用webpack實現模組化管理和打包。

區域性安裝webpack

carbon (16).png

webpack-cli最新為4.X版本，webpack-dev-server無法正常執行，安裝時需要指定版本（確保兩模組版本皆為3.X）。

carbon (14).png

webpack-cli 提供了許多命令來使 webpack 的工作變得簡單。官方文件
webpack-dev-server為你提供了一個簡單的 web server，並且具有 live reloading(實時重新載入) 功能。官方文件

安裝 webpack loaders

webpack 使用 loader 對檔案進行預處理。可以構建包括 JavaScript 在內的任何靜態資源。
官方外掛列表
webpack 外掛中文文件

carbon (15).png

參考
vue-loader詳解： https://segmentfault.com/a/1190000020629508
html-webpack-plugin詳解：https://www.cnblogs.com/wonyun/p/6030090.html

webpack配置

在build目錄下建立webpack配置檔案webpack.config.js,提供入口(entry)、模式（Mode）、輸出(output)、模組（Module）、外掛(Plugins)、開發伺服器(DevServer)等配置選項。官方文件

carbon (11).png

0x02.專案執行

npm scripts 配置

在npm指令碼中新增webpack命令，執行的命令會自動去node_modules尋找，不用加上目錄。

修改package.json配置

.
...
"scripts": { 
    "build:dist": "webpack --config  build/webpack.config.js",
    "dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.

cross-env配置

cross-env是一款執行跨平臺設定和使用環境變數的指令碼，不同平臺使用唯一指令，無需擔心跨平臺問題。

carbon (13).png

修改package.json配置

.
...
"scripts": { 
    "build:dist": "cross-env NODE_ENV=development webpack --config  build/webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
...
.

執行測試

命令列視窗中，在該專案根目錄下輸入npm run dev 即可進行本地開發除錯。

微信截圖_20210414165142.png

成功執行後，專案第一個頁面結果如下：

微信截圖_20210414165237.png

最終目錄結構

carbon (19).png

0x03.示例程式碼

Github Repo

相關文章