Webpack 初體驗

時間 2020-04-15

標籤 webpack 體驗简体版

原文原文鏈接

寫在前面說得話
首先對你們說聲抱歉，我寫這篇文章是爲了記錄學習Webpack，可能原標題引發了公憤，我看視頻內容是Webpack 5.0 ，可能新得內容在後面會更新，因此標題定義爲 ‘ Webpack 5.0 ’.
若是以爲文章對你收穫不大，請各位大佬輕噴。
若是有收得到話，關注之後獲取更多技術內容。前端

如果你是前端程序員的話，相信你會和我有一樣的感概 ‘ 前端個丫的，技術更新太快了，老子學不動了’
但是現實誰會管你哈，學不動回家養豬去。😭
現在面試除了基礎的前端三大框架外，你還必須得掌握 webpack等前端自動化構建工具。
心想一個前端框架就夠學得了,你TM 還出一個 Webpack 來霍霍我們。😱
哎，誰讓我們是前端程序員呢，前端技術更新迭代快,這誰也掌控不了,只有緊跟時代,我們技術人才不會被拋棄吧。node

小夥伴們的心聲

◆ ◆ ◆web

兄弟們，幹就好了微信

Webpack 入門

Webpack 定義

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。app

Webpack 五個核心概念

entry 入口配置

**入口起點(entry point)**指示 webpack 應該使用哪個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。編輯器

每個依賴項隨即被處理，最後輸出到稱之爲 bundles 的文件中.學習

可以通過在 [webpack 配置]中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值爲 ./srcurl

output 輸出路徑

output 屬性告訴 webpack 在哪裏輸出它所創建的 bundles，以及如何命名這些文件，默認值爲 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。spa

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效[模塊]，然後你就可以利用 webpack 的打包能力，對它們進行處理。3d

本質上，webpack loader 將所有類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。

在 webpack 配置中定義 loader 時，要定義在 module.rules 中，而不是 rules*。*

plugins 插件

簡單的說，plugins 就是用來處理 loader翻譯後的文件，進行更多的操做與執行，從打包優化和壓縮，一直到重新定義環境中的變量。

Mode 模式

Webpack 模式分爲開發模式 development 和生產模式 production,可以啓用相應模式下的 webpack 內置的優化

Webpack 初體驗

安裝 webpack

1. 全局安裝
npm i webpack webpack-cli -g
2. 項目 安裝 開發 依賴
npm i webpack webpack-cli -D
複製代碼

打包文件

webpack ./src/index.js -o ./build/test.js --mode=development
複製代碼

執行打包後的文件

node ./build/x.js
複製代碼

Webpack 支持打包js / json 文件，其它格式通過loader來處理

查看打包後的文件

打包樣式文件 css less sass .....

Webpack 本身是只支持js文件格式的，其它格式文件不能直接處理，它需要經過loader 來處理後，然後使用插件來進行配置處理。

例如下面：使用 loader來處理樣式文件轉js，文件，原理是，將樣式文件轉爲字符串，最終轉換成Webpack可識別的文件。

`loader`處理

在 webpack 的配置中 loader 有兩個目標：

test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。

use 屬性，表示進行轉換時，應該使用哪個 loader。

loader 使用：

下載

使用

    module: {
        rules: [   
            // 不同文件 必須配置 不同的loader 處理
           {
            // 匹配哪些文件
            test: /\.css$/,
            // 使用哪些插件來處理翻譯後的文件
            use: [
                // use 數組 loader 執行順序  從右到左，  從上到下
                'style-loader',
                'css-loader'
            ]
           },
           {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                // 將less  編譯成css 文件
                'less-loader'
            ]
           }
        ]
    },
複製代碼