Element源碼:項目初始化和webpack配置

2021-04-14 18:56 

Anduril 

閱讀(0) 

評論(0) 

編輯 

收藏

0x00.項目初始化

由于整個過程像素級 copy element，是以将不使用

vue-cli

初始化項目。

建立項目

建立一個空的檔案夾，使用

npm init

來初始化項目，并安裝vue子產品。

修改目錄結構

根目錄中添加檔案夾

根目錄下建立項目配置檔案:

.gitignore

README.md

public目錄下，建立模闆頁檔案:

favicon.ico

index.html

examples目錄下，建立示例入口檔案:

App.vue

main.js

logo.png

0x01.wepack安裝與配置

項目使用webpack實作子產品化管理和打包。

局部安裝webpack

webpack-cli

最新為

4.X

版本，

webpack-dev-server

無法正常運作，安裝時需要指定版本（確定兩子產品版本皆為

3.X

）。

webpack-cli

提供了許多指令來使 webpack 的工作變得簡單。官方文檔

webpack-dev-server

為你提供了一個簡單的 web server，并且具有 live reloading(實時重新加載) 功能。官方文檔

安裝 webpack loaders

webpack 使用 loader 對檔案進行預處理。可以建構包括 JavaScript 在内的任何靜态資源。

官方插件清單

webpack 插件中文文檔

參考

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)

等配置選項。官方文檔

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是一款運作跨平台設定和使用環境變量的腳本，不同平台使用唯一指令，無需擔心跨平台問題。

修改

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

即可進行本地開發調試。

成功運作後，項目第一個頁面結果如下：

最終目錄結構

0x03.示例代碼

Github Repo

• 分類 0x02.FrontEnd
• 标簽 element