vue筆記-webpack篇-webpack基本使用

1.模塊化開發概念

沒有模塊化的時候多人開發是這樣的

<script>
  <!--張三的代碼-->
  let zp1 = 'zp1'
  console.log(zp1)
</script>

<script>
  <!--李四的代碼-->
  let lp1 = 'lp1'
  console.log(lp1)
</script>

若是能保證多我的中的代碼不會出現相同名稱的話，不使用模塊化也是沒問題的，可是若是多我的的代碼中存在相同的變量或者函數時就會出現問題了

<script>
  <!--張三的代碼-->
  let zp1 = 'zp1'
  console.log(zp1)

  let p2 = 'zp2'
  console.log(p2)
</script>

<script>
  <!--李四的代碼-->
  let lp1 = 'lp1'
  console.log(lp1)

  let p2 = 'lp2'
  console.log(p2)
</script>

若是變量使用var定義的話就會出現被覆蓋的現象，此時就須要張三或李四修改各自的代碼才行，當多人協做的時候這種狀況會出現的更加頻繁，太多的時間浪費在這種無心義的事情上了，可是若是有模塊化，就能夠避免這種問題了
假設張三的代碼在modelA模塊中，李四的代碼在modelB中，當須要使用張三的代碼時，須要將張三的模塊modelA導入，訪問時使用模塊名+變量或函數名訪問，這種方式下只要保證模塊名不重複就能夠避免訪問變量或函數時出現重複的狀況

2.多種規範下的模塊化標準

目前的模塊化標準存在多個，amd、cmd和es6標準，每一個標準對應的導入導出模塊等關鍵字不相同，vue中使用的是es6的模塊化標準
es6模塊化標準規定導出一個變量、對象、函數時使用export關鍵字，導入時使用imort關鍵字

<meta charset="UTF-8">
  <title>Title</title>




<script src="main.js" type="module"></script>

import zobj from './modelA.js'
import lobj from './modelB.js'

console.log(zobj.name)
console.log(lobj.name)

let obj = {
  name: 'zhangsan'
}

export default obj

let obj = {
  name: 'lisi'
}

export default obj

能夠看到經過模塊化的方式能夠避免同名變量出現覆蓋或報錯的狀況
從模塊中能夠導出變量、函數、對象，默認只能有一個是default，導出default時容許在導入時自定義名稱，不然就須要使用導出時定義的名稱

export const p1 = 'p1'
export function m1(){
  console.log('m1')
}

import * as zs from './modelA.js'

console.log(zs.p1)
zs.m1()

3.webpack的做用

首先看下官方網站的介紹

左邊的是項目開發中各類各樣的文件，經過webpack能夠將這些分散的文件打包爲一個總體，好比將項目中多個js文件打包到一個js文件中，最後輸出的目錄中只存在一個html、一個js和一些資源文件
經過一些配置就能夠實現項目自動的打包功能了，webpack中有一些核心的概念
入口：webpack從哪一個文件開始打包
輸出：打包完成後須要輸出哪些信息，放在哪一個目錄下
loader：處理每一個類型的文件，好比打包到sass結尾的文件時，就會調用對應的loader進行處理
插件：打包優化，資源管理，注入環境變量等各類各樣的任務，比loader更強大

4.hello world

首先安裝webpack，在安裝webpack前須要先安裝npm，以後使用npm命令安裝webpack

輸入webpack命令能查看版本說明已經安裝成功了

建立以下目錄結構

其中webpack.config.js就是用來配置webpack打包信息的，此名稱爲默認名稱，當執行webpack命令時會首先查找該名稱的文件，在此文件中配置入口、輸出、loader等信息

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

能夠看到webpack的配置也是一個對象，其中入口文件爲index.js，輸出路徑爲當前路徑下的dist目錄，輸出文件名爲bundle.js
接着是使用模塊化開發後的代碼
index.js

import bar from './bar';

bar();

bar.js

export default function bar() {
  //
}

helloworl.html

<meta charset="UTF-8">
  <title>Title</title>




<script src="dist/bundle.js"></script>

在命令行中輸入webpack命令進行打包

命令結束後就會在當前目錄下生成bundle.js文件了，此文件像普通的js文件同樣在html中引入後便可使用

5.webpack解析其餘文件的方式

webpack默認支持js文件的打包，若是想打包其餘文件，則須要安裝對應的loader才能夠
具體的loader使用方式參考文檔https://v4.webpack.docschina.org/loaders/

css loader

安裝

npm install --save-dev css-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

當在js中遇到導入css語句時，就會使用此loader進行打包

import css from 'file.css';

vue-loader

和webpack中的loader類似，vue官方爲了更好的分離vue代碼，提供了一個loader負責解析特定的vue格式https://vue-loader.vuejs.org/zh/
用法和webpack中的loader相似，首先須要安裝

npm install -D vue-loader vue-template-compiler

接着在webpack.confi.js中配置

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  module: {
    rules: [
      // ... 其它規則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 請確保引入這個插件！
    new VueLoaderPlugin()
  ]
}

配置以後webpack在打包時就能夠識別以.vue結尾的文件並進行打包了，vue文件內部的格式爲

<template>
  <div class="example">{{ msg }}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
<style>
.example {
  color: red;
}
</style>

經過此種方式，之後編寫vue文件時就會更加的方便了，每一個組件對應一個單獨的文件

live server

每次編寫完代碼後都要從新刷新頁面，這種操做很浪費時間，webpack提供了一種實時刷新頁面的功能
首先在js文件中配置

var path = require('path');
module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

當運行之後就能夠經過本地的9000端口訪問打包後的頁面了，當頁面代碼改動後，服務器會自動從新加載

6.插件

和loader的區別

loader是用來處理某個特定的文件類型的，而插件是用來作更高級別的功能，它屬於給全局添加功能，而不是隻針對某一種文件類型經常使用有將打包後的js文件進行醜化的插件、添加版權信息的插件等等