大家好,我是robert,今天是用webpack从0开发一个ts版的element源码的第二天
作者:robert 仓库地址:gitee.com/dawwdadfrf/…
最近在学习element的源码,想着学习element的时候来顺便把webpack,css,ts方面的知识也学一学,因为是第一次分享,过程中可能存在着很多的不足之处。请大家多多指教。本项目适用于小伙伴入门,文章将持续更新
一.与git仓库关联,方便对我们的代码管理和保存,我用的码云
网址:gitee.com/
1.先在码云创建一个仓库
2.输入相应的内容(仓库名称,是否开源)
3.输入完成之后点击创建之后会跳到这样一个页面,此时仓库建立完成
4.回到项目中,在自己的项目中输入以下命令
git init
当前页面在左边会多了一堆3K+的东西。
5.在自己的项目里面新增加 .gitignore 文件 意思是以下三部分内容不传入仓库,
node_modules/
dist/
package-lock.json
此时旁边的圈住的个数变成了个位数了
6.依次输入以下命令(以下命令不要直接复制我的,查看第3步骤里码云点创建完成后对应的内容)
git add .
git commit -m "[feature]第一次提交"
git remote add origin **********************
git push -u origin master
7.如果大家到了这一步说明,本地仓库与线上仓库就建立了联系了。此时可以去码云里面看看是否有代码。
二. 让项目可以像vue-cli脚手架一样运行起来。
1.安装webpack-dev-server
npm install --save-dev webpack-dev-server
2.配置package.json文件
"scripts": {
"dev": "webpack-dev-server --watch -inline --progress --config build/webpack.config.js",
"build": "webpack --config build/webpack.config.js"
},
3.配置webpack.config.js文件
devServer: {
host: '127.0.0.1',
port: 8085,
publicPath: '/',
hot: true,
stats: 'errors-only'
},
4.运行刚刚配置好的命令
npm run dev
5.在浏览器中运行网址: http://127.0.0.1:8085/
运行后发现页面中现在是这样一个目录,下一个部分就是带大家在页面中展示对应的html内容
6.将代码保存的码云仓库
git add .
git commit -m '[feature]webpack服务安装成功'
git push
7.此时webpack.config.js的内容为
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
devServer: {
host: '127.0.0.1',
port: 8085,
publicPath: '/',
hot: true
},
}
8.package.json的内容为
{
"name": "share-ui",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --watch -inline --progress --config build/webpack.config.js",
"build": "webpack --config build/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
温馨提示: 第二部分内容只对package.json和webpack.config.js里的文件做了修改
三.设置启动页面
1.安装html模版依赖包
npm install --save-dev webpack-dev-server
2. 在根目录下创建一个文件examples文件夹
3. 在examples文件夹里创建index.tpl文件(是一个模版文件,我直接复制的element源码里的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Element - The world's most popular Vue UI framework</title>
<meta name="description" content="Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库" />
</head>
<body>
<div id="app"></div>
</body>
</html>
4.目录结构为
5.在webpack.config.js文件新增以下内容
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './examples/index.tpl',
})
]
6.重新运行 npm run dev
提示每次修改完webpack.config.js中的内容都需要重新运行命令
7.将代码发送到仓库
git add .
git commit -m '[feature]引入html模版'
git push
8.webpack.config.js最终内容为
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
devServer: {
host: '127.0.0.1',
port: 8085,
publicPath: '/',
hot: true
},
plugins: [
new HtmlWebpackPlugin({ //打包生成新的html文件
template: './examples/index.tpl',
})
]
}
四. 接下来我们引入vue文件
1.安装插件
npm install vue
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler
2.在examples目录下面创建文件app.vue文件
<template>
<div>
{{name}}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
name: '嘿嘿嘿'
}
}
}
</script>
3.在examples目录下面创建文件main.js文件
import Vue from 'vue';
import entry from './app.vue'
new Vue({
el: "#app",
render: h => h(entry)
})
4.此时项目的目录结构为
5.webpack.config.js新增以下内容
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
]
6. 修改webpack.config.js的入口文件
entry: './src/index.js',
变更为
entry: './examples/main.js',
7.此时webpack.config.js代码为
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './examples/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
},
devServer: {
host: '127.0.0.1',
port: 8085,
publicPath: '/',
hot: true
},
plugins: [
new HtmlWebpackPlugin({ //打包生成新的html文件
template: './examples/index.tpl',
}),
new VueLoaderPlugin(),
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
}
8.重新启动webpack服务 npm run dev 浏览:http://127.0.0.1:8085/
9.如果页面出现嘿嘿嘿三个字则vue引入成功
10.将代码发送到仓库
git add .
git commit -m '[feature]引入vue文件'
git push
以上内容如有遗漏错误,欢迎留言 ✍️指出,一起进步💪💪💪
如果觉得本文对你有帮助,🏀🏀留下你宝贵的 👍