webpack打包樣式資源(三)
本篇文章主要講述webpack.config.js的自定義配置以及對樣式資源打包的處理。
首先還是建立2個資料夾src和build參考之前所說webpack打包(二)。
接下來主要說一下webpack.config.js這個檔案的作用以及loader的用法(打包css、less)。
在src的同級目錄中建立一個檔案叫做webpack.config.js。
webpack.config.js的作用：指示webpack做哪些事情。一旦運行了webpack就會載入其中的配置。
所有的構建工具都是基於node.js執行，而模組化採用的是common.js。專案用的是es6，配置用的是common.js。
第一步用common.js語法暴露webpack的相關配置(五個核心)。
1 module.exports = { 2 entry: '', 3 output: { 4 filename: '', 5 path: '', 6 }, 7 module: { 8 rules: [ 9 { 10 test: / /, 11 use: [ 12 13 ] 14 }15 ] 16 }, 17 plugins: [ 18 ], 19 mode: '', 20 }
entry：指示從那個檔案開始打包。
output：打包到哪裡去。
filename：檔案打包成功後的名字。
path：檔案打包後的路徑(一般用絕對路徑)。
module：loader的相關配置。
rules：執行webpack成功後會進入rules尋找loader規則。多個規則則建立多個物件。
test：類似js的正則表示式的匹配，用來匹配某個字尾名的檔案，然後對其進行解析。
use：指定使用哪些loader對其進行解析，這裡注意一點，use是一個數組，對於其中的屬性解析的時候，執行順序是從右往左，從下往上進行依次執行。也就是說從末尾開始執行解析。
plugins：對複雜業務的處理。
mode：指定以哪種模式打包。值為development/production。
好弄清這些屬性的意思我們再來寫其中的內容。假設我們現在要打包一個css檔案，上篇內容已經測試過常規方法是不能夠打包css檔案的會報錯。
/** * webpack 配置檔案 * 作用：指示webpack幹那些活(當你執行webpack的時候會載入其中的配置) * * 所有的構建工具都是基於node.js執行~模組化採用common.js。專案用的是es6，而配置用的是common.js。 */ //nodejs語法：resolve用來拼接絕對路徑的方法 const { resolve } = require('path'); //暴露物件 寫webpack相關配置(五個核心配置) module.exports = { //入口起點 entry: './src/index.js', output: { //輸出檔名 filename: 'built.js', //路徑 //__dirname nodejs的變數，代表當前檔案的目錄的絕對路徑 path: resolve(__dirname, 'build') }, // loader的配置(翻譯) module: { rules: [ //詳細loader { //正則匹配符合字尾的檔案遍歷rules一旦發現以css結尾的檔案進行處理 test: /\.css$/, //使用哪些loader use: [ //use中的lodaer執行順序是從右到左(從下到上)依次執行 //建立一個style標籤，將js中的css樣式資源插入進去，新增到頁面中的head生效。 'style-loader', //將css檔案以字串的形式變成commonjs的一個模組載入到js中，裡面的內容是樣式字串。 'css-loader' ] } ] }, //plugins的配置 plugins: [ //詳細plugins的配置 ], //模式(兩個值不能同時寫) mode: 'development', //開發模式 //mode: 'production' //生產模式 }
這裡需要注意的一點是，在寫路徑的時候我們用到了一個新的屬性resolve，以及__dirname。
那這樣我們就可以很好理解為從src下面的index.js檔案開始打包，輸出到build檔案下的built.js。
這裡為了方便以後的使用，我們將包的管理都安裝在外面。在最外面安裝style-loader和css-loader。 --npm i style-loader css-loader -D
style-loader：建立style標籤，將js中的css樣式插入到style標籤裡。
css-loader：將css檔案以字串的形式變成commonjs的一個模組載入到js中，裡面的內容是樣式字串。
安裝成功後我們來建立一個css檔案輸入任意樣式看看html檔案有沒有根據樣式進行改變。在src資料夾中建立2個檔案分別是index.js和index.css。程式碼如下：
index.css
1 html body{ 2 height: 100%; 3 background-color: pink; 4 }
index.js
1 import './index.css'
直接輸入webpack命令打包。可以看到打包成功的介面。
而且build資料夾中也多了一個built.js檔案。然後我們在該資料夾中建立一個html檔案引入這個js檔案看一下是否能夠改變html的顏色。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>webpack</title> 8 </head> 9 10 <body> 11 <script src="./built.js"></script> 12 <h1>hello webpack</h1> 13 </body> 14 15 </html>
執行後的頁面：
嗯沒錯變成了粉色。然後按F12看一看樣式是如何加入的。
可以看到是建立一個style標籤插入到head中。
接下來我們引入一個less檔案試一下。新建一個less檔案程式碼如下：
1 h1 { 2 color: #ffffff; 3 }
在rules中新加如一個匹配less字尾的規則以及loader：
1 { 2 test: /\.less$/, 3 use: [ 4 'style-loader', 5 'css-loader', 6 'less-loader' 7 ] 8 }
less-loader：將less檔案編譯成css檔案。
在index.js中引入less檔案
1 import './index.css' 2 import './index.less'
繼續外部引入包 less-loader，這裡注意一下還要引入一個less的包。--npm i less less-loader -D
然後輸入webpack打包。
進入頁面重新整理。可以看到結果：
字型變成白色的了。然後F12看一下如何編譯less的：
也是插入style標籤轉成了css檔案輸出。
以上就是關於自定義配置以及css打包的內容。