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文件