【webpack配置工程師】系列一（核心概念篇）

時間 2019-12-18

標籤 webpack配置工程師系列核心概念简体版

原文原文鏈接

前言

關於版本，咱們講述的是 webpack 4.0 版本javascript

我但願你們在用 webpack 前，要搞清楚，咱們爲何要用 webpack ，它存在的意義是什麼？css

webpack 基礎概念

webpack 能夠把它理解爲一款工具，一款幫助咱們打包的工具，也能夠稱之爲前端構建工具。html

簡單來講 webpack 作的事情就是將一些特別複雜且瀏覽器沒法識別東西，經過 webpack 編譯、打包後，生成了瀏覽器能夠識別的靜態資源。前端

webpack 都能作哪些事情，舉幾個栗子：java

文件打包（代碼合併）
文件壓縮（壓縮體積）
代碼轉換（scss，less，es6）
代碼分割（公共模塊抽離）
模塊合併（公共模塊合併）
熱更新（自動刷新）
代碼校驗
自動發佈

咱們須要作的就是在配置文件中寫好配置，而後剩下的工做 webpack 會幫咱們自動處理。node

在使用 webpack 前，咱們須要安裝 Node.js 與 npm，webpack 是基於node編寫的，而npm則用來安裝依賴。jquery

webpack 文件結構

在安裝開始前，我先說兩個文件，以及它們的做用。webpack

package.json

在安裝 webpack 前，咱們須要初始化一個 package.json 文件，它是項目的描述文件，它的內容是一個json對象。es6

例如：web

項目名稱（name）
項目版本號（version）
項目描述（description）
npm 命令（scripts）
項目依賴（dependencies）

package.json 能夠手工編寫，也能夠用npm命令自動生成。

{
  //項目名稱
  "name": "chom",                                
  //版本號
  "version": "1.0.4",                             
  //項目描述
  "description": "前端基礎工具庫",                
  //入口文件
  "main": "dist/chom.min.js",
  //依賴模塊,生產模式
  "dependencies": {},
  //項目開發所須要的模塊,以及版本,開發模式
  "devDependencies": {							 
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "babel-loader": "^8.0.6",
    "eslint": "^6.7.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  //npm 命令行縮寫
  "scripts": {									
    "test": "echo \"Error: no test specified\" && exit 1",
    //好比 npm run build 
    "build": "webpack --config build/webpack.config.js",     
    "lint": "eslint src/**"
  },
  //做者
  "author": "Zhangwenqiang",
  //項目許可證
  "license": "ISC"                              
}

複製代碼

webpack.config.js

webpack 默認會讀取 webpack.config.js 文件的配置信息，能夠在webpack 源碼中修改默認文件名，也能夠按環境區分將webpack.config.js 拆分紅多個文件，例如：webpack.base.js 、webpack.dev.js 、webpack.prod.js

webpack 結構組成

在瞭解 webpack 使用配置時，咱們必須首先要熟悉 webpack 中幾個的核心概念。

mode

在 webpack 中有兩種常見的模式，一種是 development（開發模式），一種是 production（生產模式）

module.exports = {
    mode: 'development'
}
複製代碼

entry

entry 是 webpack 的入口文件

// 單個入口文件的簡寫語法

module.exports = {
    entry: './src/index.js' // entry 屬性指定入口文件路徑
};
複製代碼

output

output 是 webpack 打包以後輸出的文件

// 單個入口文件的簡寫語法

module.exports = {
    entry: './src/index.js',
    output: { // output 屬性指定打包以後的文件放在什麼位置
        // filename 屬性指定輸出文件的文件名稱
        filename: 'bundle.js',
        // path 屬性指定輸出目錄的絕對路徑
        path: '/dist'
    }
};
複製代碼

loader

loader 用於對模塊的源代碼進行轉換

由於 webpack 只能理解 JavaScript，因此須要 loader 將其它類型的文件轉化爲 webpack 可以處理的有效模塊

不一樣的 loader 完成不一樣的任務，下面的例子指定使用 css-loader 處理 CSS 文件

npm install --save-dev css-loader

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

plugins

plugin 用於處理一些拓展任務，從打包優化和壓縮，一直到從新定義環境中的變量

// 在打包過程當中會使用UglifyJsPlugin這個插件來對代碼進行一些壓縮整理等
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}
複製代碼

webpack 安裝流程

具體的安裝流程 webpack的安裝和配置 .

大概流程是下載node.js，初始化項目，安裝 webpack 與 webpack-cli

webpack 配置概念

這裏我會介紹一些 webpack 經常使用插件的概念以及爲何要使用這些插件。

html-webpack-plugin

簡單來講 html-webpack-plugin 的基本做用就是生成html文件。

前面提到過，webpack 默認只能處理 javascript 文件，顯然咱們的項目中不可能只存在js文件，咱們須要 webpack 將html也進行打包處理，這個時候就須要用到 html-webpack-plugin

html-webpack-plugin 還有一個重要的做用是會將html文件中引入的外部資源，自動建立一個正確的路徑。

例如a.html 引入了 a.js ，但經過 webpack 打包會把a.js與其餘js文件進行打包，而a.html引入的路徑已經失效，此時 html-webpack-plugin 會自動將a.html引入的文件路徑修改爲已經打包後的文件路徑。

具體的使用方法 html-webpack-plugin的使用

樣式處理

webpack 處理css文件通常須要用到 css-loader 與 style-loader

css-loader 的做用是解析css中的import、url、require之類的語法，幫咱們分析出各個css文件之間的關係，把各個css文件合併成一段css

style-loader 的做用是將css-loader 生成的css代碼掛載到頁面的header部分，見下圖：

若是項目中用到了scss或者less，都須要安裝想對應的loader，具體的使用方法 webpack 打包樣式

轉化es6語法

爲何要處理es6語法？

es6語法並非全部瀏覽器都支持、都能運行，一些瀏覽器若是不支持那麼就會報錯，致使用戶體驗很是糟糕，這個時候咱們就須要使用babel來將es6語法處理成es5語法，好比箭頭函數、map()等語法特性，轉換成瀏覽器可以識別的，低級的JS語法，就能夠解決這個問題。

關於es6的兼容性，大概是這個樣子滴：

Chrome 51 版起即可以支持 97% 的 ES6 新特性。
Firefox 53 版起即可以支持 97% 的 ES6 新特性。
Safari 10 版起即可以支持 99% 的 ES6 新特性。
IE Edge 15能夠支持 96% 的 ES6 新特性。Edge 14 能夠支持 93% 的 ES6 新特性。（IE7~11 基本不支持ES6）win10以後的瀏覽器是edge。以前的是IE。

具體的使用方法 webpack編譯ES6

處理js語法校驗

提到js語法校驗，不得不提到 eslint

eslint 是什麼？爲何咱們要在項目中使用 eslint

eslint 是一個語法規則和代碼風格的檢查工具

它能夠檢測咱們編寫的代碼，給代碼一個規範，項目中的代碼必須按照這個規範編寫

統一代碼規範對咱們有哪些好處？

有些格式上的問題會致使咱們在發佈生產環境時出現一些莫名的錯誤
團隊協做，團隊保持同一個風格編寫代碼，代碼的可讀性以及可維護性都較爲友好

具體使用的方法 webpack引入eslint詳解

全局變量引入

作項目時咱們可能會遇到這種場景：一個變量不少文件中都會用到，這變量多是第三方包（好比 Jquery ），也多是本身定義的一個工具類。

這種狀況咱們怎麼辦？難道要在全部頁面中都引用這個變量嗎？答案是否認的，這樣會形成項目的維護成本很高。

那麼咱們該如何高效便捷的引入全局變量呢，其實有兩種方式。

使用 webpack 模塊註冊全局變量
將變量暴露給 window 對象成爲全局變量

這裏要注意一下，webpack 是一個工具，在這個工具裏面，有一個同名的模塊，叫作 webpack，咱們就用這個模塊給每個頁面或者組件注入一個對象。

//以jquery爲例
let Webpack = require('webpack')    // 引入webpack模塊

module.exports = {
    plugins: [      // 這是一個插件，因此要在plugins屬性中配置
        new Webpack.ProvidePlugin({
            $: 'jquery'
        })
    ],
}
複製代碼

這樣咱們直接就能夠在頁面或組件中直接使用jquery，例如：

console.log($)
複製代碼

第二種方法，我在這裏就不闡述了，感興趣的同窗能夠自行搜索，我我的仍是比較喜歡用第一種方法的（主要是懶，有點寫不動了）。

圖片處理

webpack 在處理圖片上一般會使用 file-loader 、url-loader

file-loader 的做用

file-loader 能夠用來幫助 webpack 打包處理 png jpg jepg等格式的圖片;

file-loader 打包圖片會生成一個hash值做爲圖片的名字;

url-loader 的做用

url-loader 能夠將圖片轉換成base64的圖片格式，能夠減小網站的http請求，可是如果相同圖片被引用屢次，每一次都轉換成base64，會形成js性能損耗，所以是將圖片資源轉換爲base64 仍是採用 http 的方式，要看圖片具體的使用方式了。

這裏要注意一下，url-loader內部封裝了file-loader，url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader。

打包文件分類

在使用 webpack 打包時，可能要將css歸類到css目錄下,img歸類到img目錄下，咱們也可能會在引用資源的時候加上域名前綴，這時候就用到了咱們的打包文件分類。

給圖片歸類到img目錄下

rules:[
		
	{
		test:/\.(png|jpg|gif)$/,
		use:{
			loader:'url-loader',
			options:{	limit:2,//200k，小於200k使用base64來轉換
			outputPath:'/img/'//大於上面的limit的圖片就會生成到dist下的img文件夾下，同時全部路徑都會加上這個img/
			}
		}
	}
]
複製代碼

給css歸類到css目錄下

plugins:[
	new MiniCssExtractPlugin({
		filename:'/css/[name].[chunkhash:8].css',//抽離出來的css的文件名稱，並在dist下生成css文件夾，將該文件放到該css目錄下，引入的時候會自動加上/css/
	})
]
複製代碼

對全部輸出資源加域名前綴，在引用的資源前，統一加上這個額publicPath，好比打包後的css路徑是 /css/main.css，那麼引用的時候就會成爲publicPath值+ /css/main.css

output:{
	filename:'bundle.[hash:8].js', 
	path:path.resolve(__dirname,'./dist'),
	publicPath:'http://www.yuhua.com',//在引用的資源前，統一加上這個額publicPath，好比打包後的css路徑是css/main.css，那麼引用的時候就會成爲publicPath值+'css/main.css'
},
複製代碼