摘要：構(gòu)建文件清理構(gòu)建目錄下的文件打包工具編譯文件模板函數(shù)編譯與配合使用入口處理項(xiàng)目中的不同類型的模塊。

之前有寫了一篇webpack的文章(認(rèn)識(shí)篇) 猛戳,大家對(duì)于webpack基本概念(entry,output,loader,plugin,mode...)應(yīng)該是有了較模糊的認(rèn)識(shí).今天希望在通過(對(duì)于vue-cli的效仿)搭建一個(gè)自己的腳手架的途中對(duì)于概念會(huì)有更深刻的認(rèn)識(shí).

1:搭建自己的項(xiàng)目模板(template) （基于vue的模板)

2:生成對(duì)應(yīng)的init命令,也就是腳手架構(gòu)建命令以及上傳NPM包 , 方便之后模板的使用 （分開倆篇來講,方便你我 下一篇見)

先來個(gè)雞湯 (這是個(gè)什么玩意啊怎么這么簡(jiǎn)單,我沒問題分分鐘掌握它) 擺正心態(tài) 那么follow me ?。?！

mkdir my-vue-cli && cd my-vue-cli   // 新建一個(gè)文件 并進(jìn)入更目錄 `mkdir 是linux命令`
npm init -y   // 初始一個(gè)packjage.json文件  -y 表示跳過詢問步驟...

完善項(xiàng)目結(jié)構(gòu)

//生成如下目錄
  ├── src                                        //源目錄(輸入目錄)
  │?? ├── index.js          
  │?? ├── app.vue                               
+ |── index.html       
  ├── package.json 
  |── webpack.config.js                          //webpack配置文件                        

下載所需要的依賴(不太清楚的依次會(huì)介紹一下)

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 模塊提供了一些工具函數(shù)，用于處理文件與目錄的路徑。

npm install --save-dev html-webpack-plugin
簡(jiǎn)化了HTML文件的創(chuàng)建 Plugin that simplifies creation of HTML files to serve your bundles

` npm install --save-dev clean-webpack-plugin
用于構(gòu)建時(shí)清理構(gòu)建文件夾下的內(nèi)容 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
對(duì)于模板的函數(shù)編譯 與vue-loader 配合使用

npm install --save-dev webpack-dev-server
熱更新需要搭建服務(wù)模塊

npm install --save-dev style-loader css-loader
css樣式處理器

項(xiàng)目代碼構(gòu)建

src/index.js

import Vue from "vue"   // 引入vue模塊
import App from "./app.vue"  //引入文件(組件) app

new Vue({                //vue寫法 新建一個(gè)實(shí)例
  el:"#app",             //元素  
  template:"",  // 模板使用標(biāo)簽
  components:{App}   // 組件app
})

src/app.vue

webpack.config.js

const path = require("path");    //path 模塊提供了一些工具函數(shù)，用于處理文件與目錄的路徑。
const HtmlWebpackPlugin = require("html-webpack-plugin");   //構(gòu)建html文件
const CleanWebpackPlugin = require("clean-webpack-plugin");  // 清理構(gòu)建目錄下的文件
const webpack = require("webpack");       //webpack打包工具
const VueLoaderPlugin = require("vue-loader/lib/plugin");         // vue-loader 編譯vue文件
const compiler = require("vue-template-compiler")            // 模板函數(shù)編譯 與vue-loader配合使用

module.exports = {
  entry: {       //入口
      "app":"./src/index.js"
  },
  module:{            //處理項(xiàng)目中的不同類型的模塊。
    rules:[      // rules 各種規(guī)則(數(shù)組類型) 每個(gè)規(guī)則可以分為三部分 - 條件(condition)，結(jié)果(result)和嵌套規(guī)則(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 映射對(duì)應(yīng)代碼  方便錯(cuò)誤查詢
  devServer:{
      contentBase: "./dist",    // 告訴服務(wù)從哪提供代碼內(nèi)容(靜態(tài)文件這么使用)
    hot:true    //hot模式開啟 
  },
  plugins:[
    new CleanWebpackPlugin(["dist"]),  // 告訴清理插件的目錄
    new HtmlWebpackPlugin({            // 構(gòu)建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:{
        //引入路徑是不用寫對(duì)應(yīng)的后綴名
        extensions: [".js", ".vue", ".json"],
        alias:{
            //正在使用的是vue的運(yùn)行時(shí)版本，而此版本中的編譯器時(shí)不可用的，我們需要把它切換成運(yùn)行時(shí) + 編譯的版本
            "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  運(yùn)行于8080/可看到預(yù)期效果.
npm run build   打包編譯同樣可以看到效果    skr~~~~~~~~~

github代碼倉(cāng)庫(kù),猛戳

本篇只是介紹基于vue,webpack的vue-cli簡(jiǎn)易搭建(因?yàn)閕nit構(gòu)建命令這些說好講是好講,但是講太粗怕大家不太明白,那不如多帶帶拿一篇出來讓大家看),根據(jù)本文大家可以根據(jù)需求進(jìn)行完善搞一個(gè)自己的腳手架.之后用自己的開發(fā)..是不是想想挺美~~ 快去行動(dòng)吧.

ps:(有我講的不明白的地方,評(píng)論區(qū)見.我來完善)