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

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

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

1. 簡介

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

剛進入webpack我們就可以清楚的看到下面這個圖，可想而知webpack 的重要性以及功能的強大

2. 上手準備

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

3. 安裝

webpack的安裝目前分為兩個：webpack、webpack-cli
執(zhí)行webpack命令，會執(zhí)行node_modules下的.bin目錄下的webpack；
webpack在執(zhí)行時是依賴webpack-cli的，如果沒有安裝就會報錯；
而webpack-cli中代碼執(zhí)行時，才是真正利用webpack進行編譯和打包的過程；
所以在安裝webpack時，我們需要同時安裝webpack-cli（第三方的腳手架事實上是沒有使用webpack-cli的，而是類似于自
己的vue-service-cli的東西）

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

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

創(chuàng)建局部webpack
第一步：創(chuàng)建package.json文件，用于管理項目的信息、庫依賴等
第二步：安裝局部的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)建一個webpack.config.js文件，來作為webpack的配置文件：

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

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

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

3. 編寫案列

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

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

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

css-loader使用

npm install css-loader -D

使用方案
內(nèi)聯(lián)方式：內(nèi)聯(lián)方式使用較少，因為不方便管理； p在引入的樣式前加上使用的loader，并且使用!分割；

loader配置方式
module.rules的配置如下：

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

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

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

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

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

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

• loader屬性： Rule.use: [ { loader } ] 的簡寫

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

npm install style-loader -D

配置style-loader

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

如何處理less文件
使用less工具來完成它的編譯轉(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是一個通過JavaScript來轉(zhuǎn)換樣式的工具；
這個工具可以幫助我們進行一些CSS的轉(zhuǎn)換和適配，比如自動添加瀏覽器前綴、css樣式的重置；
但是實現(xiàn)這些功能，我們需要借助于PostCSS對應(yīng)的插件；

如何使用PostCSS呢？主要就是兩個步驟：
第一步：查找PostCSS在構(gòu)建工具中的擴展，比如webpack中的postcss-loader；
第二步：選擇可以添加你需要的PostCSS相關(guān)的插件；

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

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

npm install postcss-loader -D

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

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

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

最新評論