前言之前有写了一篇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.jsimport Vue from ‘vue’ // 引入vue模块import App from ‘./app.vue’ //引入文件(组件) appnew 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.jsconst 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:(有我讲的不明白的地方,评论区见.我来完善)