随我来基于webpack构建一个简易的vue脚手架 (webpack系列二)

前言

之前有写了一篇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配置文件                        

下载所需要的依赖(不太清楚的依次会介绍一下)

1. npm install --save-dev vue
   基于vue的那么vue必不可少...不多介绍
2. npm install --save-dev webpack
   基于webpack的那么webpack也必不可少...不多介绍
3. npm install --save-dev webpack-cli
webpack version 4+ 需要下载webpack-cli(一些指令下文可能涉及到)
4. npm install --save-dev path
path 模块提供了一些工具函数，用于处理文件与目录的路径。
5. npm install --save-dev html-webpack-plugin
   简化了HTML文件的创建 Plugin that simplifies creation of HTML files to serve your bundles
6. ` npm install --save-dev clean-webpack-plugin
   用于构建时清理构建文件夹下的内容 A webpack plugin to remove/clean your build folder(s) before building
7. npm install --save-dev vue-loader
   Vue.js组件加载器(插件)
8. npm install --save-dev vue-template-compiler
   对于模板的函数编译 与vue-loader 配合使用
9. npm install --save-dev webpack-dev-server
   热更新需要搭建服务模块
10. 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~~~~~~~~~

github代码仓库,猛戳

结尾

本篇只是介绍基于vue,webpack的vue-cli简易搭建(因为init构建命令这些说好讲是好讲,但是讲太粗怕大家不太明白,那不如单独拿一篇出来让大家看),根据本文大家可以根据需求进行完善搞一个自己的脚手架.之后用自己的开发..是不是想想挺美~~ 快去行动吧.

想提前看看构建命令效果的同学 >

git仓库

ps:(有我讲的不明白的地方,评论区见.我来完善)