關於我對webpack的部分理解

當前Web開發所面臨的一些問題

 1.檔案依賴關係的複雜
 2.靜態資源請求的效率比較地下
 3.模組化支援並不友好
 4.瀏覽器對高階JS語言特性的相容性比較低

針對以上的問題 出現了webpack工具，那麼什麼是webpack工具呢?

他是一個靜態資源打包的工具 可以將js,image,css 等資源當成一個模組進行打包。

其中的核心概念

1.入口 entry: 打包起點，可以有一個或者多個，一般都是一些js檔案；webpack會從七點檔案開始，尋找七點之間或者間接依賴的資源，作為將來打包的原始資料。
2.輸出 output: 一般包含兩個屬性：path和filename;用來告訴webpack打包的目標資料夾，以及檔案的名稱；目的地可以是有多個。
3.載入器 loader: webpack本身只識別js檔案，如果載入非JS檔案，必須指定額外的loader；將這些檔案轉為webpack能處理的有效模組。
4.外掛plugins: 外掛可以擴充套件webpack功能，讓其不止能完成打包，甚至更加複雜的功能，對打包功能進行優化，壓縮，提高效率。
 

關於Webpack如何使用的問題

1.首先本地安裝webpack
  npm install webpack webpack-cli --save-dev
2.在根目錄中 建立webpack.config.js檔案
3.在上述檔案中初始化
  module.exports = {
	mode: 'development'	//mode 用來指定構建模式
  }
4.在packahe.json配置檔案中的script節點，增加build指令碼
  "script": {
	"dev": "webpack"	//script節點下的指令碼可以通過npm run執行
  }
5.在終端中執行npm run build，打包
 

補充點

配置打包的入口和出口

4.0版本預設約定 
  1.打包的入口檔案 src -->index.js
  2.打包的輸出檔案 dist -->main.js

自動打包功能

 1.npm install webpack-dev-server-D 命令。安裝支援專案自動打包的工具

 2.修改package.json ->scripts中的build命令
  "script": {
	"build": "webpack-dev-server"
  }
 3.將src->index.html中, script指令碼的引用路徑, 修改為’/build.js’
 4.執行 npm run命令, 更新進行打包
 

配置html-webpack-plugin生成預覽頁面

 1.執行 npm install html-webpack-plugin -D 命令, 安裝生成預覽頁面的外掛
 2.修改webpack-config.js檔案頭部區域, 新增如下配置資訊
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const htmlPlugin = new HtmlWebpackPlugin({
	template: './src/index.html',
	filename: 'index.html'
 })
 3.修改 webpack.config.js檔案中向外暴露的配置物件, 新增如下配置節點
    plugins: [htmlPlugin]

Vue單檔案元件的基本用法

webpack中配置vue元件的載入器
  1.執行npm i vue-loader vue-template-compiler -D命令
  2.在webpack.config.js配置檔案中, 新增vue-loader的配置項
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    reules: {test: /\.vue$/, loader: 'vue-loader'}
    plugins: { new VueLoaderPlugin()  }
  3.安裝vue
  4.webpack打包
    通過package.json檔案新增命令
    "bulid": "webpack -p"