Webpack常見使用配置小結(jié)

第Webpack常見使用配置小結(jié)目錄1.簡(jiǎn)介2.上手準(zhǔn)備3.安裝3.編寫案列隨著前端開發(fā)越來越復(fù)雜，那么我們需要做的功能也不止基本界面了，

比如開發(fā)過程中我們需要通過模塊化的方式來開發(fā)；比如也會(huì)使用一些高級(jí)的特性來加快我們的開發(fā)效率或者安全性，比如通過ES6+、TypeScript開發(fā)腳本邏輯，通過sass、less等方式來編寫css樣式代碼；比如開發(fā)過程中，我們還希望實(shí)時(shí)的監(jiān)聽文件的變化來并且反映到瀏覽器上，提高開發(fā)的效率；比如開發(fā)完成后我們還需要將代碼進(jìn)行壓縮、合并以及其他相關(guān)的優(yōu)化；等等.

即使我們使用三大框架或者借助于腳手架cli事實(shí)上Vue-CLI、create-react-app、Angular-CLI都是基于webpack來幫助我們支持模塊化、less、TypeScript、打包優(yōu)化等的；

1.簡(jiǎn)介

我們先來看一下官方的解釋：

webpackisastaticmodulebundlerformodernJavaScriptapplications.

webpack是一個(gè)靜態(tài)的模塊化打包工具，為現(xiàn)代的JavaScript應(yīng)用程序；

我們來拆分一下官方解釋：

剛進(jìn)入webpack我們就可以清楚的看到下面這個(gè)圖，可想而知webpack的重要性以及功能的強(qiáng)大

2.上手準(zhǔn)備

webpack的官方文檔是/webpack的中文官方文檔是/DOCUMENTATION：文檔詳情，也是我們最關(guān)注的Webpack的運(yùn)行是依賴Node環(huán)境的，所以我們電腦上必須有Node環(huán)境p所以我們需要先安裝Node.js，并且同時(shí)會(huì)安裝npm；p我當(dāng)前電腦上的node版本是v14.15.5，npm版本是6.14.11（你也可以使用nvm或者n來管理Node版本）；Node官方網(wǎng)站：

3.安裝

webpack的安裝目前分為兩個(gè)：webpack、webpack-cli

執(zhí)行webpack命令，會(huì)執(zhí)行node_modules下的.bin目錄下的webpack；

webpack在執(zhí)行時(shí)是依賴webpack-cli的，如果沒有安裝就會(huì)報(bào)錯(cuò)；

而webpack-cli中代碼執(zhí)行時(shí)，才是真正利用webpack進(jìn)行編譯和打包的過程；

所以在安裝webpack時(shí)，我們需要同時(shí)安裝webpack-cli（第三方的腳手架事實(shí)上是沒有使用webpack-cli的，而是類似于自

己的vue-service-cli的東西）

npminstallwebpackwebpack-cli–g#全局安裝

npminstallwebpackwebpack-cli–D#局部安裝

注意如果我們創(chuàng)建好項(xiàng)目，配置好package.json想要直接使用npmrunbuild，我們需要在創(chuàng)建我們的src文件夾，并且文件夾下面必須有index.js,自從v4.0.0版本開始，webpack不再需要配置文件。沒有配置文件，webpack僅在存在scr/index.js文件時(shí)才有效。這個(gè)信息（使用粗體）在文檔中明確標(biāo)明。

創(chuàng)建局部webpack

第一步：創(chuàng)建package.json文件，用于管理項(xiàng)目的信息、庫(kù)依賴等

第二步：安裝局部的webpack

第三步：使用局部的webpack

第四步：在package.json中創(chuàng)建scripts腳本，執(zhí)行腳本打包即可

創(chuàng)建局部的webpack

npminit

npminstallwebpackwebpack-cli-D

npxwebpack

或者配置package.json文件

npmrunbuild

我們可以在根目錄下創(chuàng)建一個(gè)webpack.config.js文件，來作為webpack的配置文件：

繼續(xù)執(zhí)行webpack命令，依然可以正常打包

之后我們執(zhí)行npmrunbuild來打包即可

指定配置文件

我們將webpack.config.js修改成了wk.config.js，這個(gè)時(shí)候我們可以通過--config來指定對(duì)應(yīng)的配置文件；

3.編寫案列

當(dāng)我們想使用css的時(shí)候

上面的錯(cuò)誤信息告訴我們需要一個(gè)loader來加載這個(gè)css文件，但是loader是什么呢？

loader可以用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換；

我們可以將css文件也看成是一個(gè)模塊，我們是通過import來加載這個(gè)模塊的；

在加載這個(gè)模塊時(shí)，webpack其實(shí)并不知道如何對(duì)其進(jìn)行加載，我們必須制定對(duì)應(yīng)的loader來完成這個(gè)功能；

css-loader使用

npminstallcss-loader-D

使用方案

內(nèi)聯(lián)方式：內(nèi)聯(lián)方式使用較少，因?yàn)椴环奖愎芾?；p在引入的樣式前加上使用的loader，并且使用!分割；

loader配置方式

module.rules的配置如下：

rules屬性對(duì)應(yīng)的值是一個(gè)數(shù)組：[Rule]數(shù)組中存放的是一個(gè)個(gè)的Rule，Rule是一個(gè)對(duì)象，對(duì)象中可以設(shè)置多個(gè)屬性：

test屬性：用于對(duì)resource（資源）進(jìn)行匹配的，通常會(huì)設(shè)置成正則表達(dá)式；

use屬性：對(duì)應(yīng)的值時(shí)一個(gè)數(shù)組：[UseEntry]

UseEntry是一個(gè)對(duì)象，可以通過對(duì)象的屬性來設(shè)置一些其他屬性

loader：必須有一個(gè)loader屬性，對(duì)應(yīng)的值是一個(gè)字符串；options：可選的屬性，值是一個(gè)字符串或者對(duì)象，值會(huì)被傳入到loader中；query：目前已經(jīng)使用options來替代；

傳遞字符串（如：use:[style-loader]）是loader屬性的簡(jiǎn)寫方式（如：use:[{loader:

style-loader}]）；

loader屬性：Rule.use:[{loader}]的簡(jiǎn)寫

可以通過css-loader來加載css文件但是中并沒有生效（頁(yè)面沒有效果）。我們還需要style-loader將.css文件進(jìn)行解析,完成插入style的操作

npminstallstyle-loader-D

配置style-loader

loader的執(zhí)行順序是從右向左（或者說從下到上，或者說從后到前的），所以我們需要將styleloader寫到css-loader的前面；

如何處理less文件

使用less工具來完成它的編譯轉(zhuǎn)換：

npminstallless-D

less-loader處理

npminstallless-loader-D

module:{

rules:[

test:/\.css$/,

use:[

{loader:'style-loader'},

loader:'css-loader',

options:{

modules:true

postcss-loader安裝

什么是PostCSS呢？

PostCSS是一個(gè)通過JavaScript來轉(zhuǎn)換樣式的工具；

這個(gè)工具可以幫助我們進(jìn)行一些CSS的轉(zhuǎn)換和適配，比如自動(dòng)添加瀏覽器前綴、css樣式的重置；

但是實(shí)現(xiàn)這些功能，我們需要借助于PostCSS對(duì)應(yīng)的插件；

如何使用PostCSS呢？主要就是兩個(gè)步驟：

第一步：查找PostCSS在構(gòu)建工具中的擴(kuò)展，比如webpack中的postcss-loader；

第二步：選擇可以添加你需要的PostCSS相關(guān)的插件；

npminstallpostcsspostcss-cli-D

npminstallautoprefixer-D

真實(shí)開發(fā)中我們必然不會(huì)直接使用命令行工具來對(duì)css進(jìn)行處理，而是可以借助于構(gòu)建工具：

在webpack中使用postcss就是使用postcss-loader來處理的；

np