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

tomorrowwu 发布于2019-08-23 13:05 / 911人阅读

摘要：构建文件清理构建目录下的文件打包工具编译文件模板函数编译与配合使用入口处理项目中的不同类型的模块。

前言

之前有写了一篇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构建命令这些说好讲是好讲,但是讲太粗怕大家不太明白,那不如多带带拿一篇出来让大家看),根据本文大家可以根据需求进行完善搞一个自己的脚手架.之后用自己的开发..是不是想想挺美~~ 快去行动吧.

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

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

云服务器专线服务 webpack的作用 webpack的cdn webpack _webpack

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99204.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
还不打算去认识一下webpack?

摘要：前言随我来去看看为时未晚第一版较浅显的知识懂得可忽略本文方向安装起步搭建运行粗略代过对于资源的管理对于输出的管理举例介绍本地开发基础服务热更新模块热替换初步认识初步构建新建一个文件并进入更目录是命令初始一个文件表示跳过询问步骤安装前言随我来,去看看webpack!(为时未晚)============》第一版(较浅显的知识,懂得可忽略本文) 方向安装,起步搭建运行. (粗略代...

Tony_Zby 2019-08-23 12:51 评论0 收藏0
2017年1月前端月报

摘要：平日学习接触过的网站积累，以每月的形式发布。年以前看这个网址概况在线地址前端开发群月报提交原则技术文章新的为主。平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 概况在线地址：http://www.kancloud.cn/jsfront/month/82796 JS前端开发群月报提交原则：技...

FuisonDesign 2019-08-29 12:35 评论0 收藏0