前言
之前有写了一篇 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-cli webpack version 4+ 需要下载 webpack-cli(一些指令下文可能涉及到)
npm install –save-dev path path 模块提供了一些工具函数，用于处理文件与目录的路径。
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 热更新需要搭建服务模块
项目代码构建
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~~~~~~~~~
github 代码仓库, 猛戳
结尾
本篇只是介绍基于 vue,webpack 的 vue-cli 简易搭建(因为 init 构建命令这些说好讲是好讲, 但是讲太粗怕大家不太明白, 那不如单独拿一篇出来让大家看), 根据本文大家可以根据需求进行完善搞一个自己的脚手架. 之后用自己的开发.. 是不是想想挺美~~ 快去行动吧.
ps：想提前看看构建命令效果的同学 > git 仓库, 戳一戳把 ps:(有我讲的不明白的地方, 评论区见. 我来完善)