webpack 可以看做是模塊打包機(jī)：他做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到 JavaScript 模塊以及其他的一些瀏覽器不能直接運(yùn)行的擴(kuò)展語言（ Scss 、 TypeScript 等），將其打包為合適的格式以供瀏覽器使用

創(chuàng)新互聯(lián)建站主營且末網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),且末h5小程序開發(fā)搭建,且末網(wǎng)站營銷推廣歡迎且末等地區(qū)企業(yè)咨詢

構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上可執(zhí)行的 JavaScript 、CSS、HTML 代碼，包括以下內(nèi)容：

• 代碼轉(zhuǎn)換 ： TypeScript 編譯成 JavaScript 、 SCSS 編譯成 CSS 等等 文件優(yōu)化 ：壓縮 JavaScript 、CSS、HTML 代碼，壓縮合并圖片等
• 代碼分割 ：提取多個頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載
• 模塊合并 ：在采用模塊化的項(xiàng)目有很多模塊和文件，需要構(gòu)建功能把模塊分類合并成一個文件
• 自動刷新 ：監(jiān)聽本地源代碼的變化，自動構(gòu)建，刷新瀏覽器
• 代碼校驗(yàn) ：在代碼被提交到倉庫前需要檢測代碼是否符合規(guī)范，以及單元測試是否通過
• 自動發(fā)布 ：更新完代碼后，自動構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。

構(gòu)建其實(shí)是工程化、自動化思想在前端開發(fā)中的體現(xiàn)。把一系列流程用代碼去實(shí)現(xiàn)，讓代碼自動化地執(zhí)行這一系列復(fù)雜的流程。

webpack 的基本概念

入口(entry point): 指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始，webpack 會找出有哪些模塊和 library 是入口起點(diǎn)（直接和間接）依賴的。

默認(rèn)值是 ./src/index.js ，然而，可以通過在 webpack 配置中配置 entry 屬性，來指定一個不同的入口起點(diǎn)（或者也可以指定多個入口起點(diǎn)）。

出口 output: 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，主輸出文件默認(rèn)為 ./dist/main.js ，其他生成文件的默認(rèn)輸出目錄是 ./dist

loader: 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進(jìn)行處理。

注意，loader 能夠 import 導(dǎo)入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務(wù)執(zhí)行器的可能并不支持。我們認(rèn)為這種語言擴(kuò)展是有很必要的，因?yàn)檫@可以使開發(fā)人員創(chuàng)建出更準(zhǔn)確的依賴關(guān)系圖。

插件 plugins: loader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來處理各種各樣的任務(wù)。

模式 mode: 通過選擇 development 或 production 之中的一個，來設(shè)置 mode 參數(shù)，你可以啟用相應(yīng)模式下的 webpack 內(nèi)置的優(yōu)化

webpack 構(gòu)建過程

• 從 Entry 里配置的 Module 開始遞歸解析 Entry 依賴的所有 Module。
• 每找到一個 Module， 就會根據(jù)配置的 Loader 去找出對應(yīng)的轉(zhuǎn)換規(guī)則。
• 對 Module 進(jìn)行轉(zhuǎn)換后，再解析出當(dāng)前 Module 依賴的 Module。
• 這些模塊會以 Entry 為單位進(jìn)行分組，一個 Entry 和其所有依賴的 Module 被分到一個組也就是一個 Chunk。
• 最后 Webpack 會把所有 Chunk 轉(zhuǎn)換成文件輸出。
• 在整個流程中 Webpack 會在恰當(dāng)?shù)臅r機(jī)執(zhí)行 Plugin 里定義的邏輯。

開發(fā)環(huán)境和生產(chǎn)環(huán)境

我們在日常的前端開發(fā)工作中，一般都會有兩套構(gòu)建環(huán)境：一套開發(fā)時使用，一套供線上使用。

• development : 用于開發(fā)的配置文件，用于定義 webpack dev server 和其他東西
• production : 用于生產(chǎn)的配置文件，用于定義 UglifyJSPlugin ， sourcemaps 等

簡單來說，開發(fā)時可能需要打印 debug 信息，包含 sourcemap 文件，而生產(chǎn)環(huán)境是用于線上的即代碼都是壓縮后，運(yùn)行時不打印 debug 信息等。譬如 axios、antd 等我們的生產(chǎn)環(huán)境中需要使用到那么我們應(yīng)該安裝該依賴在生產(chǎn)環(huán)境中，而 webpack-dev-server 則是需要安裝在開發(fā)環(huán)境中

平時我們 npm 中安裝的文件中有 -S -D, -D 表示我們的依賴是安裝在開發(fā)環(huán)境的，而-S 的是安裝依賴在生產(chǎn)環(huán)境中。

本文就來帶你搭建基本的前端開發(fā)環(huán)境，前端開發(fā)環(huán)境需要什么呢？

• 構(gòu)建發(fā)布需要的 HTML、CSS、JS、圖片等資源
• 使用 CSS 預(yù)處理器，這里使用 less
• 配置 babel 轉(zhuǎn)碼器 => 使用 es6+
• 處理和壓縮圖片
• 配置熱加載，HMR

以上配置就可以滿足前端開發(fā)中需要的基本配置。下面是本文打包后的效果圖：

 

搭建基本的開發(fā)環(huán)境

安裝

mkdir webpack-dev && cd webpack-dev
npm init -y
npm i webpack webpack-cli -D

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：webpack4.0入門實(shí)踐教程-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://weahome.cn/article/copggd.html