過濾器

• 區域性過濾器:寫在元件的物件中 和data同級.filter()
• 全域性過濾器: 元件定義外部Vue.filters()

webpack學習

是什麼?

• 前端資源化模組化管理和打包工具;
• 按照依賴關係打包生成符合生產環境的靜態資源;
• 非同步按需載入;

核心概念

• entry 入口; 專案的打包入口檔案
• output 出口; 經webpack打包生成結果
• Loader 模組資源轉換器(需npm安裝); 讓webpack打包非.js檔案
  
  • webpack.config.js 配置檔案 預設會搜尋當前目錄下的該檔案
    
    • devDependencies開發版第三方庫
    • dependencies生產版第三方庫
    • dev指令碼,開啟node run dev執行它的程式碼
• plugins 外掛

//安裝到本地node_modules
var webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: './entry.js', //配置打包的入口檔案
    output: { //出口
        path: path.join(__dirname), //打包的東西放在哪個資料夾下
        filename: 'bundle.js' //最終打包生成檔名稱
 

    },
    module: { //loader的配置
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //從右到左執行  先讀取,加到頭部
        }]
    },
    plugins: [
        new webpack.BannerPlugin('這個檔案是zhaolin建立的')
    ]
}

第三包的資訊package.json檔案

• npm init -y建立package.json檔案 記錄第三方包檔案;在黑窗執行npm install 自動安裝node_modules;
• 安裝本地 webpack npm i webpack @3.11.0 -D開發版本

webpack打包時的引數

• webpack –progress 檢視進度條
• –config 檔名 配置檔案webpack.config.dev.js
• –p 壓縮

• –watch 監控(內容更改時自動重新打包)

• npm i -D/-S -D:開發環境;-S:生產環境

webpack + vue 搭建專案(頁面看到Hello Vue)

• 1.建立必要的檔案和資料夾

    * |-src
    *    |-App.vue 專案根元件
    *    |-main.js 專案打包的入口檔案
    * |-package.json 專案記錄檔案,記錄安裝哪些第三方包
    * |-webpack.config.dev.js 配置檔案
    * |-template.html

• 2.寫上必要程式碼
  

  App.vue 根元件

<template>
  <div>
      <h1>Hello Vue!</h1> 
      <p>測試熱過載</p>
  </div>
</template>

main.js 匯入根元件,利用vue框架建立的render函式渲染根元件

import Vue from 'vue'  //相當於var Vue=require('vue')

//匯入根元件
import App from './App.vue'
//建立根例項
new Vue({
    el:"#app",
    //利用vue框架建立的render函式渲染根元件
    render:function(createElement){
        return createElement(App);
    }
})

webpack.config.dev.js 配置檔案

const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    entry:'./src/main.js',//入口
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
        /* 以template.html檔案為參照檔案,生成index.html;
        並且釋出到webpack-dev-server開啟的node伺服器上 */
        new HtmlWebpackPlugin({
            template:'./template.html'
        })
    ]
}

• 3.使用webpack-dev-server 和 html-webpack-plugin

  • html-webpack-plugin
    a.以一個參考檔案為模版，生成index.html，並且會自動釋出到webpack-dev-server開啟的node服務上面去
    b.建立template.html檔案,包含#app標籤;
    c.配置檔案中寫plugins陣列

  • webpack-dev-server 寫package.json中的scripts中

    • webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
    • --hot 熱過載(更改內容後不重新整理頁面更改)

• 4.最終執行 根目錄下 執行npm run dev

需要安裝的第三方包

• 第一次安裝
  包:vue
  應用場景:我們要去執行App.vue
  安裝方式：npm i vue -S
• 第二次安裝
  包:vue-loader vue-template-compiler css-loader style-loader
  應用場景:我們要打包.vue結尾的檔案
  安裝方式：npm i vue-loader vue-template-compiler css-loader style-loader -D
• 第三次安裝(兩個版本應該對應)
  包:html-webpack-plugin [email protected] [email protected]
  應用場景:我們到時候執行打包出來的bundle.js
  安裝方式:npm i html-webpack-plugin [email protected] [email protected] -D