随我来基于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配置文件                        

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

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
热更新需要搭建服务模块

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:"",  // 模板使用标签
  components:{App}   // 组件app
})

src/app.vue

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:(有我讲的不明白的地方,评论区见.我来完善)