前言
之前有写了一篇webpack的文章(认识篇)
猛戳,大家对于
webpack基本概念
(entry,output,loader,plugin,mode...)应该是有了较模糊的认识.今天希望在通过(对于
vue-cli的效仿)搭建一个自己的脚手架的途中对于概念会有更
深刻的认识.
目录
1:搭建自己的项目模板(template) （基于vue的模板)
2:生成对应的init命令,也就是脚手架构建命令以及上传NPM包 , 方便之后模板的使用 （分开俩篇来讲,方便你我 下一篇见)
一: 模板构建
先来个鸡汤 (这是个什么玩意啊怎么这么简单,我没问题分分钟掌握它) 摆正心态 那么follow me ！！！
初步构建
mkdir my-vue-cli && cd my-vue-cli // 新建一个文件 并进入更目录 `mkdir 是linux命令`
npm init -y // 初始一个packjage.json文件 -y 表示跳过询问步骤...
完善项目结构
//生成如下目录
├── src //源目录(输入目录)
│ ├── index.js
│ ├── app.vue
+ |── index.html
├── package.json
|── webpack.config.js //webpack配置文件
下载所需要的依赖(不太清楚的依次会介绍一下)
-
npm install --save-dev vue
基于vue的那么vue必不可少…不多介绍 -
npm install --save-dev webpack
基于webpack的那么webpack也必不可少…不多介绍 -
npm install --save-dev webpack-cliwebpack version 4+需要下载webpack-cli(一些指令下文可能涉及到) -
npm install --save-dev pathpath模块提供了一些工具函数，用于处理文件与目录的路径。 -
npm install --save-dev html-webpack-plugin
简化了HTML文件的创建Plugin that simplifies creation of HTML files to serve your bundles - ` npm install –save-dev clean-webpack-plugin
用于构建时清理构建文件夹下的内容A webpack plugin to remove/clean your build folder(s) before building -
npm install --save-dev vue-loader
Vue.js组件加载器(插件) -
npm install --save-dev vue-template-compiler
对于模板的函数编译 与vue-loader 配合使用 -
npm install --save-dev webpack-dev-server
热更新需要搭建服务模块 -
npm install --save-dev style-loader css-loader
css样式处理器
项目代码构建
src/index.js
import Vue from 'vue' // 引入vue模块
import App from './app.vue' //引入文件(组件) app
new Vue({ //vue写法 新建一个实例
el:"#app", //元素
template:'<App/>', // 模板使用标签<app/>
components:{App} // 组件app
})
src/app.vue
<template>
<div id="app">
<p class="test">vue-cli-test vue-cli-test vue-cli-test </p>
<p class="test">{{msg}}</p>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name:'app',
data(){
return {
msg:"hello vue !!"
}
},
}
</script>
<style >
.test{
color:#020202;
font-size:18px;
}
</style>
webpack.config.js
const path = require('path'); //path 模块提供了一些工具函数，用于处理文件与目录的路径。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //构建html文件
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清理构建目录下的文件
const webpack = require('webpack'); //webpack打包工具
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vue-loader 编译vue文件
const compiler = require('vue-template-compiler') // 模板函数编译 与vue-loader配合使用
module.exports = {
entry: { //入口
"app":"./src/index.js"
},
module:{ //处理项目中的不同类型的模块。
rules:[ // rules 各种规则(数组类型) 每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)
{
test:/\.css/,
use: ['style-loader', 'css-loader'] // style-loader 和css-loader 编译css处理
},
{
test: /\.vue$/,
loader: 'vue-loader' //vue-loader 编译vue模块
}
]
},
devtool: 'inline-source-map', //生曾map 映射对应代码 方便错误查询
devServer:{
contentBase: './dist', // 告诉服务从哪提供代码内容(静态文件这么使用)
hot:true //hot模式开启
},
plugins:[
new CleanWebpackPlugin(['dist']), // 告诉清理插件的目录
new HtmlWebpackPlugin({ // 构建html
filename:'index.html', //文件名
title:'my-vue-cli', //title
template:'./index.html', //参照模板样式
}),
new webpack.HotModuleReplacementPlugin(), //热模块替换开启
new VueLoaderPlugin() //vue-loader插件开启
],
output: { //出口
filename: 'index.js', //文件名
path: path.resolve(__dirname, 'dist'), //路径
publicPath:"" //srcript 引入路径
},
resolve:{
//引入路径是不用写对应的后缀名
extensions: ['.js', '.vue', '.json'],
alias:{
//正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本
'vue$':'vue/dist/vue.esm.js',
//用@直接指引到src目录下
'@': path.resolve(__dirname,'./src'),
}
},
};
package.json添加script命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open --hot",
"build": "webpack"
},
npm run dev运行于8080/可看到预期效果.
npm run build打包编译同样可以看到效果
skr~~~~~~~~~
结尾
本篇只是介绍基于vue,webpack的vue-cli简易搭建(因为init构建命令这些说好讲是好讲,但是讲太粗怕大家不太明白,那不如单独拿一篇出来让大家看),根据本文大家可以根据需求进行完善搞一个自己的脚手架.之后用自己的开发..是不是想想挺美~~ 快去行动吧.
想提前看看构建命令效果的同学 >
git仓库
ps:(有我讲的不明白的地方,评论区见.我来完善)
