webpack+Vue+ts+仿寫element-ui源碼1(持續更新)

你們好，我是robert，今天開始帶你們用webpack從0開始開發一個ts版的element源碼

---

做者：robert 倉庫地址:gitee.com/dawwdadfrf/…

最近在學習element的源碼，想着學習element的時候來順便把webpack，css，ts方面的知識也學一學，由於是第一次分享，過程當中可能存在着不少的不足之處。請你們多多指教。本項目適用於小夥伴入門，文章將持續更新

---

準備工做

1. 安裝node環境
2. 安裝npm環境

---

一.初始化項目

npm init -y 的含義：yes的意思，在init的時候省去了敲回車的步驟，生成的默認的package.json**

---

---

二.建立目錄和設置cnpm淘寶鏡像源

1. 建立build空文件
2. 建立src空文件
3. 建立.npmrc文件，文件內容以下

registry=https://registry.npm.taobao.org
disturl=https://npm.taobao.org/dist
sass_binary_site=https://npm.taobao.org/mirrors/node-sass
electron_mirror=https://npm.taobao.org/mirrors/electron/
PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors
複製代碼

此時項目的最終效果圖

三.安裝webpack

---

官網地址:www.webpackjs.com/guides/inst…

1.安裝插件 (--save-dev是隻有在開發狀態下才須要)

1. npm install webpack-cli --save-dev
2. npm install webpack --save-dev

---

2.在src文件下面建立一個文件 index.js

console.log('123')
複製代碼

3.在build文件裏建立一個文件 webpack.config.js

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, '../dist')
    }
}
複製代碼

4.修改package.json文件中的

{
  "name": "share-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}
複製代碼

5. 此時的目錄結構

6.運行命令 npm run build

此時目錄結構中會多出一個dist目錄和在dist目錄下面多了bundle.js

7.此時webpack就安裝成功了

---

以上內容若有遺漏錯誤，歡迎留言 ✍️指出，一塊兒進步💪💪💪

若是以爲本文對你有幫助，🏀🏀留下你寶貴的 👍

---

下一篇：webpack啓動本地服務到加載vue文件