篇文章我們講解了webpack中的loader，并且使用less、less-loader、css-loader、style-loader，將一個在js中import的less文件通過webpack將樣式打包到了頁面中，但是我們發(fā)現(xiàn)，頁面中樣式確實是有了，但是頁面的樣式是通過style標簽的形式寫入到了頁面中，在實際開發(fā)中我們其實更傾向于使用link標簽導入樣式，這時候應該怎么做呢？

一、使用mini-css-extract-plugin插件

這個插件能將CSS提取為獨立的文件，對每個包含css的js文件都會創(chuàng)建一個CSS文件，支持按需加載css和sourceMap。

首先安裝插件

cnpm install mini-css-extract-plugin --save-dev

安裝完插件后其實就是設置了，下面是簡單的設置信息：

const { CleanWebpackPlugin }=require('clean-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
 mode:"development",
 entry:{
 "common":"./src/js/common.js",
 "index":"./src/js/index.js",
 "login":"./src/js/login.js"
 },
 output:{
 filename:"js/[name].js",
 },
 plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 template:'./src/index.html',
 filename:'index.html',
 chunks:["common","index"],
 hash:true
 }),
 new HtmlWebpackPlugin({
 template:'./src/login.html',
 filename:'login.html',
 chunks:["common","login"],
 hash:true
 }),
 new MiniCssExtractPlugin({
 filename:'css/[name].css',
 chunkFilename:'[id].css'
 })
 ],
 module:{
 rules:[
 // {
 // test:/\.less$/,
 // use:[
 // {loader:"style-loader"},
 // {loader:"css-loader"},
 // {loader:"less-loader"}
 // ]
 // }
 {
 test:/\.less$/,
 use:[
 {
 loader:MiniCssExtractPlugin.loader
 },
 "css-loader",
 "less-loader"
 ]
 },
 ]
 }
}

在webpack.config.js中我們首先定義插件，然后在plugins項中實例化插件（前面講到了插件需要安裝、定義、實例化三步），最后在module中定義處理less的規(guī)則，注釋掉的部分是講解loader的時候使用的，沒刪掉是要做個比較。

plugins項中mini-css-extract-plugin的實例化參數(shù)filename其實和output，html-webpack-plugin中定義的filename，完全一樣，就是給輸出文件起名字（有人可能會說不是在output中定義了嗎，其實webpack入口與輸出只是js，其他的是靠插件或者loader來處理，所用不要弄混）。

chunkFilename和html-webpack-plugin中的chunk類似，但是后面的[id].css不好理解（實在明白就這樣寫就行，固化的不會變），其實這個地方?jīng)]法寫實際具體的名字的，因為這是下面的loader中mini-css-extract-plugin插件內部自己產(chǎn)生的。

再來看rules中的定義，我們去掉了style-loader，因為我們不是要把樣式寫的頁面中，我們是希望link單獨的css文件。規(guī)則的意思就是遇到js中導入的以.less為結尾的文件使用less-loader來處理，然后轉換成css，然后讓css-loader處理樣式內部的一些關于url，或者@import等一些css的問題，然后交給下一個loader，這個時候的loader變成了mini-css-extract-plugin中的loader了，這個laoder就是將css單獨提取出來放入頁面中，如下圖：

二、處理圖片資源

頁面中有三種圖片的引用方式，一種是html頁面中的 img標簽，一種是樣式中類似background:url()，一種是是腳本中創(chuàng)建圖片并插入頁面的。那么我們就將這三種方式都嘗試一下。項目目錄如下圖：

增加了三個圖片，其實就是一個圖片就是名字不一樣而已。然后分別修改less文件，js文件，html文件，各個文件內容如下：

圖片資源的處理有很多l(xiāng)oader可以用，這里我們使用url-loader，對于頁面中的img標簽，我們使用html-withimg-loader。

安裝loader：

cnpm install url-loader html-withimg-loader --save-dev

然后配置webpack.config.js：

const { CleanWebpackPlugin }=require('clean-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
module.exports={
 mode:"development",
 entry:{
 "common":"./src/js/common.js",
 "index":"./src/js/index.js",
 "login":"./src/js/login.js"
 },
 output:{
 filename:"js/[name].js",
 },
 plugins:[
 new CleanWebpackPlugin(),
 new HtmlWebpackPlugin({
 template:'./src/index.html',
 filename:'index.html',
 chunks:["common","index"],
 hash:true
 }),
 new HtmlWebpackPlugin({
 template:'./src/login.html',
 filename:'login.html',
 chunks:["common","login"],
 hash:true
 }),
 new MiniCssExtractPlugin({
 filename:'css/[name].css',
 chunkFilename:'[id].css'
 })
 ],
 module:{
 rules:[
 {
 test:/\.less$/,
 use:[
 {
 loader:MiniCssExtractPlugin.loader,
 options:{
 publicPath:"../"
 }
 },
 "css-loader",
 "less-loader"
 ]
 },
 {
 test:/\.(png|svg|jpg|gif)$/,
 use:[
 {
 loader:'url-loader',
 options:{
 limit:10240,
 name:"imgs/[name].[ext]",
 }
 }
 ]
 },
 {
 test:/\.(htm|html)$/,
 use:["html-withimg-loader"]
 }
 ]
 }
}

這里需要注意幾點：

第一、minicssextractplugin中添加了一個配置publicPath，為什么不把它放到output中？因為output中的pubicPath會影響所有路徑。這里面我們只是想讓css-loader處理完css后只解決樣式表里的路徑問題。

第二、url-loader，limit參數(shù)，當圖片文件小于10K的時候，將文件轉換成dataUrl格式的圖片減少鏈接請求，name參數(shù)就是生成的文件名稱，當然前面的imgs是dist目錄下的imgs文件夾。

第三、遇到html或者htm結尾的文件時使用html-withimg-loader處理里面的圖片資源。

前端的模塊化開發(fā)不建議在頁面中直接使用圖片鏈接，要在js中導入圖片，但我感覺不太現(xiàn)實，畢竟img標簽不是擺設。

接下來運行 npx webpack命令，效果如下：

我們的圖片是50多K大小所以dist目錄下生成了imgs文件夾，并且將src中的圖片考了過來。

如果我們將limit的值改為102400后，圖片將直接轉換成dataurl格式，不在保存到dist目錄下，入下圖：

我們可以發(fā)現(xiàn)他們的鏈接地址是有區(qū)別的。

三、總結

我們分了五節(jié)內容簡單的描述了webpack4最基本的一些知識點，主要包括：

1、安裝

前提條件安裝node

在項目中使用npm init -y，初始化項目，主要是創(chuàng)建了一個package.json的文件，用來記錄項目信息以及依賴關系。

為了避免插件或者loader下載不了，介紹了cnpm。

2、入口與輸出

webpack.config.jswebpack的配置文件

npx webpack運行webpack的命令

最基本的入口與輸出的概念

3、插件

clear-webpack-plugin 清除dist目錄的插件

html-webpack-plugin 簡化html創(chuàng)建的一個插件，并且關聯(lián)js

mini-css-extract-plugin 單獨提起css為文件的插件

4、加載器（loader）

model模式（開發(fā)模式，產(chǎn)品模式）

less-loader、css-loader、style-loader、url-loader、html-withimg-loader

這些知識點只是讓初學者快速的跑起來一個webpack，避免踩坑，在實際的項目中遇到問題時可以知道具體知道從哪方面入手來解決問題。

如果內容中有錯誤，歡迎大家指正。謝謝！