1. 為什么需要模塊化打包工具
在上一篇文章中提到的ES Module可以幫助開發(fā)者更好地組織代碼，完成js文件的模塊化，基本解決了模塊化的問題，但是實際開發(fā)中僅僅完成js文件的模塊化是不夠的，尤其是面對一個較為龐大的工程項目的時候，主要仍有以下幾個問題需要解決：
- ES Module是ES6新語法，一些老的瀏覽器不支持
- 每個模塊對應一個script標簽，模塊劃分過于細致的時候，網(wǎng)絡請求次數(shù)多，頁面會卡頓。（在開發(fā)過程中，劃分多個模塊是有益于代碼組織的，但是生產運行的時候，不需要這么多模塊，過多的模塊反而會影響頁面加載效率）
- 不光JS文件需要模塊化，其他不同種類的資源（包括css文件等）都要完成模塊化
前2個問題都可以通過一些插件來解決，但是第3個問題支持多種文件就比較復雜，不太好處理，這時就需要使用到模塊化打包工具。
2.模塊化打包工具的功能
- 模塊打包：完成多個模塊的打包，將多個模塊的js文件打包到一個js里面。
- loader轉換： 以webpack為例，可以使用loader完成格式的轉換，改善兼容性問題
- 代碼拆分：可以拆分不同模塊的代碼，沒用到的代碼，實現(xiàn)異步加載，漸進式加載
- 可以以模塊化的方式載入各種類型的文件，比如import一個css文件
打包工具解決的是前端整體的模塊化，不只是局限于js的模塊化
3. Webpack嘗試
3.1安裝與基本使用
安裝webpack
npm install webpack webpack-cli
最簡單使用，文件結構如下，項目里只有一個index.html和一個src文件夾，src文件夾里有2個js文件
project
├── index.html
└── src
├── index.js
└── heading.js
- index.html里內容如下，只有一句，就是以模塊化的方式引入了index.js，index.js里則是導入了heading.js的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack - 快速上手</title>
</head>
<body>
<script type="module" src="./src/index.js"></script>
</body>
</html>
然后在項目根目錄（project文件夾）下打開cmd窗口，輸入npx webpack，就已經(jīng)完成了打包，此時項目的根目錄下多出一個dist文件夾，里面有一個main.js文件，將main.js引入后到html后網(wǎng)頁功能一切正常使用
這個可以看出，webpack已經(jīng)完成了打包，也就是把原本的2個模塊，打包成了1個js文件來輸出
?文章來源地址http://www.zghlxwxcb.cn/news/detail-710194.html
3.2配置文件
在項目的根目錄下添加webpack.config.js文件，這就是webpack的配置文件，這是一個運行在node環(huán)境下的js文件，所以需要使用CommonJS規(guī)范去編寫代碼。
最基本的配置如下，在配置文件里規(guī)定打包的入口，輸出的地址和文件名
const path = require('path')
module.exports = {
entry: './src/main.js', //指定打包入口文件的路徑
output: {
filename: 'bundle.js', //輸出的文件名
path: path.join(__dirname, 'output') //打包完后輸出的路徑
}
}
3.3工作模式
在之前的打包過程中，雖然可以正常打包，但是會有一個警告，顯示沒有設置mode配置項，并且自動將mode設置為production。想要配置工作模式就需要去webpack.config.js文件去配置一個mode屬性，這個屬性有三種取值，分別是 production、development 和 none。
?以開發(fā)模式為例
const path = require('path')
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
}
不同的工作模式會有不同的打包方式
- 生產模式下，Webpack 會自動優(yōu)化打包結果；
- 開發(fā)模式下，Webpack 會自動優(yōu)化打包速度，添加一些調試過程中的輔助；
- None 模式下，Webpack 就是運行最原始的打包，不做任何額外處理；
同一個簡單項目，在生產和開發(fā)模式下打包出來的js文件對比
生產模式只有短短兩行代碼，并且做了對應的壓縮和優(yōu)化處理
開發(fā)模式的代碼直截圖了一小部分，整個代碼較長，加入了許多調試相關的內容，但是也更方便閱讀
3.4打包后的內容
想了解一下打包的過程，可以直接把前面的工作模式改成none，讓他打包的時候不做額外處理，然后運行打包命令。
整體結構：最終的輸出js文件在折疊后如下圖所示，就是一個立即執(zhí)行函數(shù)，函數(shù)接收一個參數(shù)modules，modules是一個數(shù)組
?文章來源：http://www.zghlxwxcb.cn/news/detail-710194.html
函數(shù)參數(shù) 這個modules數(shù)組里的每個元素都是一個參數(shù)列表相同的函數(shù)，這每一個函數(shù)都是對應源代碼里的一個模塊，也就是說每個模塊在打包后都會被包裹在這樣一個函數(shù)中，而包裹函數(shù)這樣的作法就直接實現(xiàn)了不同模塊之間的私有作用域，這樣不會產生變量沖突和污染
立即執(zhí)行函數(shù)的主體 對于webpack的工作模塊，他首先檢查了是否存在緩存，然后定義了一個__webpack_require__的方法，最后調用了這個方法，moudleId這個參數(shù)值是模塊在之前的數(shù)組里的索引，處理第一個模塊就傳0，第二個傳1......
?
?__webpack_require__方法內部，先是創(chuàng)建了module對象，然后調用了一開始立即執(zhí)行函數(shù)的參數(shù)，并且傳入了模塊對象，exports對象，和__webpack_require__函數(shù)
?
立即執(zhí)行函數(shù)的參數(shù)的函數(shù)內部??調用了這個方法之后，就可以在模塊的內部使用module.export去導出成員使用require去載入模塊了
先是調用了__webpack_require__.r方法給exports對象加了一個es module的標記，然后執(zhí)行__webpack_require__（1），也就是對這個模塊導入的另外一個模塊，進行相同的操作，讓那個模塊也可以在模塊的內部使用module.export去導出成員使用require去載入模塊了
?
?
?
3.4加載css文件
webpack是整個前端項目的模塊化打包工具，也有打包css的能力，但是默認的loader只支持js的加載，所以這就需要使用到css-loader和style-loader
安裝css-loader
npm i css-loader style-loader
安裝完后先在src文件夾下新建一個css文件，然后寫點最簡單的改變背景色代碼，要把css加載到html里需要在webpack.config.js中做一些配置
- 修改打包的入口文件為新建的css文件（只是嘗試一下，一般推薦把js文件當作入口文件）
- 加入module屬性，module屬性是一個對象，在module里加入loader的匹配規(guī)則
運行打包命令后可以看到bundle.js里已經(jīng)有對應的代碼了，css-loader將css文件變成了字符串并且push進了一個數(shù)組，然后再通過style-loader創(chuàng)建了對應的style標簽插入了html里面
整個背景都已經(jīng)變成紅色，說明css已經(jīng)被成功加載
?
?
3.4webpack加載資源文件
打包入口
?剛才加載css文件的時候修改了打包的入口文件把js文件改成了css文件，但是一般都會把入口文件設置成js文件，然后通過import的方式去引入css或者圖片文件，雖然看起來的確繁瑣，但是這也體現(xiàn)了所有資源的引入都依賴代碼這個思想
- index.js
import createHeading from './heading.js'
import './index.css'
const heading = createHeading()
console.log(111)
在webpack.config.js的配置里入口文件仍然設置為index.js
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
use: [
'style-loader',
'css-loader'
],
test: /.css$/
}
]
}
}
設置publicPath
?除了css文件，還有圖片文件也需要引入js，這里有一個創(chuàng)建圖片并且添加進html的功能
import createHeading from './heading.js'
import './main.css'
import icon from './icon.png'
const heading = createHeading()
document.body.append(heading)
const img = new Image()
img.src = icon
document.body.append(img)
此時需要用到file-loader，需要先安裝file-loader，然后配置對應的loader規(guī)則（在配置文件的rules數(shù)組里加一項針對file-loader的配置項）
npm install file-loader
除了file-loader，還需要在output配置項里加入一個publicPath屬性，這個屬性表示打包后的內容在項目的哪個位置，默認值是空字符串，也就是說webpack會默認認為它打包好的內容會放在網(wǎng)站的根目錄下，然而實際上根據(jù)我們的文件結構，并沒有直接放在網(wǎng)站根目錄下。
網(wǎng)站的根目錄是index.html所在的外層，而打包的內容全在dist目錄下（dist目錄下也沒有html文件）
直接使用默認值會導致圖片路徑加載的錯誤，它會在index.html所在的文件夾里尋找圖片文件，然而圖片的真實路徑是在dist文件夾下，那就一定加載不出來了
我們打包后的結果在dist文件夾下，所以publicPath就寫dist/。
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: 'dist/'
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: 'file-loader'
}
]
}
}
?
轉換成dataurl
處理圖片等文件的時候，可以使用dataurl來減少發(fā)送請求的次數(shù)，提升網(wǎng)站的性能。dataurl里面就直接寫了一個文件的內容，像圖片就通過base64編碼直接寫在里面了，而html則是寫了html代碼
?安裝url-loader
npm install url-loader
配值對應的規(guī)則，把use從原來的字符串換成一個對象，加入loader和limit屬性，表示小于10KB的png圖片，直接通過url-loader把它轉換成base64編碼格式的圖片，而大于10KB的圖片，url-loader會自動調用file-loader把它復制到dist文件夾下，并且引入，所以使用url-loader的時候，必須要有file-loader
const path = require('path')
module.exports = {
mode: 'none',
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: 'dist/'
},
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024 // 10 KB
}
}
}
]
}
}
?
?
?
?
?
?
?
?
?
到了這里，關于模塊化打包工具-初識Webpack的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
