webpack4 單獨抽離打包 css 的新實現

2021-09-08 20:21:26 字數 1056 閱讀 8617

前言

之前我們使用的打包 css 無非兩種方式:① 將 css **打包進 入口 js 檔案中;② 使用第三方外掛程式(extract-text-webpack-plugin)實現【注意,該外掛程式在 webpack4 中已經不推薦使用,而且會出現各種莫名其妙的 bug】
file-loader
我先給個 file-loader 的使用說明吧(傳送門:

在我們的傳統認知中 file-loader 大多是用來處理 影象元素的,其實如果你認真看過上面的那個傳送門的話,才明白我們一直以來是被被誤導了,下面我給出幾個官方的使用例子吧.

webpack4+vue打包簡單入門

傳統的處理影象
module.exports = ,

},],

},],

},};

處理 css 【本文重點】
const path = require('path');

const cleanwebpackplugin = require('clean-webpack-plugin');

const htmlwebpackplugin = require('html-webpack-plugin');

module.exports = ,

output: ,

module: ,,]

},plugins: [

new cleanwebpackplugin(['dist']),

new htmlwebpackplugin(,

hash: true

})],

mode: "production"

};

上面這個**是我親自實測過的,大家可以放心借鑑,使用了 file-loader 來處理 css 後,就不再需要額外的外掛程式了,當然了,如果你需要指定輸出的 css 檔名和路徑,可以這麼寫user: ['file-loader?name=[name].bundle[hash].css']等,這裡的寫法就是類似 get 方式的傳參那樣,?符號後面帶引數名即可

webpack4 單獨抽離打包 css 的新實現

前言之前我們使用的打包 css 無非兩種方式 將 css 打包進 入口 js 檔案中 使用第三方外掛程式 extract text webpack plugin 實現 注意,該外掛程式在 webpack4 中已經不推薦使用,而且會出現各種莫名其妙的 bug 正是基於對以上兩種方式缺點的思考,結合我的...

基於webpack 4靜態資源打包壓縮配置

1.實現靜態資源js css less的打包 壓縮 2.html檔案載入對應的js css img檔案 工程目錄結構如下 使用webpack4 涉及到的檔案配置如下 author jagger license isc devdependencies const path require path h...

webpack4入門 打包基礎配置檔案

npm i webpack 4 npm i webpack cli npm i mini css extract plugin html webpack plugin d 安裝html模板外掛程式 與將css重新整合外掛程式 d將包寫入到開發模式中,package檔案中可見,npm i css lo...