隨著前端開發(fā)越來(lái)越復(fù)雜，那么我們需要做的功能也不止基本界面了，

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

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

1. 簡(jiǎn)介

我們先來(lái)看一下官方的解釋：
webpack is a static module bundler for modern JavaScript applications.
webpack是一個(gè)靜態(tài)的模塊化打包工具，為現(xiàn)代的JavaScript應(yīng)用程序；
我們來(lái)拆分一下官方解釋：

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

2. 上手準(zhǔn)備

• webpack的官方文檔是https://webpack.js.org/
• webpack的中文官方文檔是https://webpack.docschina.org/
• 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來(lái)管理Node版本）；
• Node官方網(wǎng)站：https://nodejs.org

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的東西）

npm install webpack webpack-cli –g # 全局安裝
npm install webpack webpack-cli –D # 局部安裝

注意如果我們創(chuàng)建好項(xiàng)目，配置好package.json 想要直接使用npm run build，我們需要在創(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

npm init
npm install webpack webpack-cli -D
npx webpack

或者配置package.json文件

npm run build

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

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

之后我們執(zhí)行 npm run build來(lái)打包即可

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

3. 編寫案列

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

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

loader 可以用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換；
我們可以將css文件也看成是一個(gè)模塊，我們是通過import來(lái)加載這個(gè)模塊的；
在加載這個(gè)模塊時(shí)，webpack其實(shí)并不知道如何對(duì)其進(jìn)行加載，我們必須制定對(duì)應(yīng)的loader來(lái)完成這個(gè)功能；

css-loader使用

npm install css-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ì)象的屬性來(lái)設(shè)置一些其他屬性

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

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

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

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

npm install style-loader -D

配置style-loader

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

如何處理less文件
使用less工具來(lái)完成它的編譯轉(zhuǎn)換：

npm install less -D

less-loader處理

npm install less-loader -D

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

postcss-loader安裝

什么是PostCSS呢？
PostCSS是一個(gè)通過JavaScript來(lái)轉(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)的插件；

npm install postcss postcss-cli -D
npm install autoprefixer -D

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

npm install postcss-loader -D

我們修改加載css的loader：（配置文件已經(jīng)過多，給出一部分了）

在根目錄下創(chuàng)建postcss.config.js

 到此這篇關(guān)于Webpack常見使用配置小結(jié)的文章就介紹到這了,更多相關(guān)Webpack常見配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論