摘要：構建文件清理構建目錄下的文件打包工具編譯文件模板函數編譯與配合使用入口處理項目中的不同類型的模塊。

之前有寫了一篇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:(有我講的不明白的地方,評論區見.我來完善)