webpack5文件解析(上)

行俠仗義的小龍女發表於2020-10-16
Web

webpack5

宣告：所有的文章demo都在我的倉庫裡 webpack5

起步

概念

webpack是用於編譯JavaScript模組。

一個檔案依賴另一個檔案，包括靜態資源(圖片/css等),都會視為依賴關係。

在webpack處理程式時，會在入口處，根據依賴關係進行處理，生成一個依賴關係圖，最終將所有的檔案打包成一個bundle。

當瀏覽器發起請求時，大大節約了時間。

更新方向

  1. 嘗試用永續性快取來提高構建效能。
  2. 嘗試用更好的演算法和預設值來改進長期快取。
  3. 嘗試用更好的 Tree Shaking 和程式碼生成來改善包大小。
  4. 嘗試改善與網路平臺的相容性。
  5. 嘗試在不引入任何破壞性變化的情況下，清理那些在實現 v4 功能時處於奇怪狀態的內部結構。
  6. 試圖通過現在引入突破性的變化來為未來的功能做準備，使其能夠儘可能長時間地保持在 v5 版本上。

安裝

建立資料夾並初始化，資料夾中會出現package.js檔案，是基礎的一些配置，包括檔名稱/版本/描述/入口檔案/關鍵字/作者等。

npm init -y

安裝webpack和webpack-cli工具，可以在終端執行webpack相關命令

node 8.2/npm 5.2.0提供npx命令，可以使用npx webpack去安裝npx

根據相應的提示，安裝webpack-cli和webpack

npm install -D webpack-cli

我安裝的版本如下：

"devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0"
},

打包

使用npx webpack進行打包，會在/dist資料夾中，生成mian.js檔案，這個是對index.js檔案以及相應依賴進行的打包檔案

出現如下結果，表示打包成功

在瀏覽器中開啟index.html，出現結果如下：

配置檔案 webpack.config.js

在完成配置的webpack.config.js的資料夾後，再次打包，打包命令是npx webpack --config webpack.config.js

一般情況下，如果存在webpack.config.js檔案，將預設選擇根據這個配置檔案進行打包，即npx webpack即可

其中--config表示根據什麼檔案配置進行打包，後面的引數就是對應的檔名稱

配置檔案裡面都是一些配置，如loader/plugin/resolve等

快捷方式

在package.json檔案中，配置script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
},

可快速的通過npm run build進行打包，效果跟之前的npx webpack一致。

*** 以上程式碼在webpack-demo1中

管理資源

由於webpack只能打包js檔案，但是其他檔案，如圖片/css等，如何打包呢？

基本的思路都是將相應的資源都轉化成js檔案

css

正常的css檔案例子如下

安裝 style-loader和css-loader

npm i --save-dev style-loader css-loader

在webpack.config.js中配置相應的css,順序很重要，'style-loader','css-loader'

最終打包出來的是一個js檔案

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

上圖展示的是在head中新增了style，由此我猜測，style-loader的作用是將css檔案放置到head中去渲染，css-loader的作用是將css檔案(包含其他形式的css，如.scss)轉化成js檔案

其他的比如less/sass等，都跟css寫法保持一致，最需將匹配的test，改成相對應的檔案字尾。

image圖片

安裝解析檔案的loader，npm i --save-dev file-loader

並在module中進行配置

module:{
    rules:[{
        test:/\.(css|scss)$/,
        use:['style-loader','css-loader']
    },{
        test:/\.(png|jpeg|jpg|svg)$/,
        use:['file-loader']
    }]
}

如上圖所示，發現webpack以及將路徑轉義了。

其他形式的檔案，都是以上面相應的方法進行安裝和配置即可。

*** 以上程式碼在webpack-demo2中

管理輸出

當檔案程式變得複雜，而且在entry中使用多個入口，並輸出多個bundle，如果要手動在index.html中新增，便使得整個程式碼看起來不便捷

這時使用外掛html-webpack-plugin

html-webpack-plugin

這個外掛可以自動更新index.html中有關js引入的檔案

安裝npm i --save-dev html-webpack-plugin

使用：

const HtmlWebpackPlugin=require('html-webpack-plugin')
plugins:[
    new HtmlWebpackPlugin({
        title:'管理輸出'
    })
]

缺點是不能去除之前的舊檔案，這時引入clean-webpack-plugin

clean-webpack-plugin

這個外掛可去除/dist檔案

在構建前去除/dist檔案，可以達到效果

安裝npm i --save-dev clean-webpack-plugin

使用：

const {CleanWebpackPlugin}=require('clean-webpack-plugin')
plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        title:'管理輸出'
    })
]

*** 以上程式碼在webpack-demo3中

開發環境

這部分是在開發環境，切不可在生產環境使用。

配置環境

在webpack.config.js中進行mode的配置

mode:'development'

定位錯誤(source map)

打包檔案時，由於打包到一個檔案裡，如果出現語法錯誤，只會定位到打包後的檔案，對於我們查詢問題就不太方便。

source map有很多的配置，對於我們現在打包定位錯誤，只需其中的devtool配置即可。

devtool: 'inline-source-map',

如webpack-demo4中的例子所示，print.js中，刻意寫錯程式碼如：cnlll.log('This is output')

正常打包，在瀏覽器執行時，會在console裡顯示報錯的檔案，以及錯誤的原因。

自動編譯

webpack-dev-server外掛提供一個簡單的web server，且具有熱載入的功能。

安裝npm i --save-dev webpack-dev-server

在配置檔案中配置:

devServer:{
    contentBase:'./dist'
},

以上程式碼是告訴dev server，將dist檔案下的檔案，掛載到localhost:8080下。

在package.json中進行配置口令執行 dev server

教程上建議如下配置

"start": "webpack-dev-serve --open"

在實踐操作中，在執行npm run start時，我出現以下報錯

> webpack-demo4@1.0.0 start /Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4
> webpack-dev-server --open

internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-demo4@1.0.0 start: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webpack-demo4@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alicezhao/.npm/_logs/2020-10-15T07_50_22_972Z-debug.log

我的有關webpack版本配置如下

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
},

我在github上找到相關的問題，看這裡

是webpack-dev-server版本不支援webpack5.0和webpack-cli4.0

最終在package.json應做如下配置

"start": "webpack serve --mode development --env development"

再執行npm run start就正常啟動。

*** 以上程式碼在webpack-demo4中

關注我，webpack5文件還有後續...

我的倉庫地址，github,歡迎star～～

相關文章