資訊專欄INFORMATION COLUMN
摘要：我是拉丁小毛，歡迎大家關(guān)注我哦，一起交流，共同進(jìn)步。有問題可以郵我哦
webpack4 多帶帶抽離打包 css 的新實(shí)現(xiàn) 前言
之前我們使用的打包 css 無非兩種方式：① 將 css 代碼打包進(jìn) 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)實(shí)現(xiàn)【注意，該插件在 webpack4 中已經(jīng)不推薦使用，而且會(huì)出現(xiàn)各種莫名其妙的 bug】file-loader
正是基于對(duì)以上兩種方式缺點(diǎn)的思考，結(jié)合我的實(shí)際使用過程，我認(rèn)為以后我們應(yīng)該完全摒棄掉上述兩種方式，這里推薦一種一種新的實(shí)現(xiàn)方式：file-loader
我先給個(gè) file-loader 的使用說明吧(傳送門：https://github.com/webpack-co...；
在我們的傳統(tǒng)認(rèn)知中 file-loader 大多是用來處理 圖像元素的，其實(shí)如果你認(rèn)真看過上面的那個(gè)傳送門的話，才明白我們一直以來是被被誤導(dǎo)了，下面我給出幾個(gè)官方的使用例子吧
module.exports = {
module: {
rules: [
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
],
},
};
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
app: "./src1/index.js",
print: "./src1/print.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{ // loader 圖片
test: /.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{ // 處理字體
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
"file-loader"
]
},
{
// 多帶帶打包出 css
test: /.css$/,
use: ["file-loader"]
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin({
title: "webpack4 extract css methord of new",
template: "./src1/index.html",
filename: "index.html",
minify: {
collapseWhitespace: true
},
hash: true
})
],
mode: "production"
};
上面這個(gè)代碼是我親自實(shí)測(cè)過的，大家可以放心借鑒，使用了 file-loader 來處理 css 后，就不再需要額外的插件了，當(dāng)然了，如果你需要指定輸出的 css 文件名和路徑，可以這么寫 user: ["file-loader?name=[name].bundle[hash].css"]等，這里的寫法就是類似 get 方式的傳參那樣，?符號(hào)后面帶參數(shù)名即可
僅供參考，如果你有什么更好的建議可以 contact 我哦聲明
原創(chuàng)手敲不易，轉(zhuǎn)載請(qǐng)注明出處，謝謝。我是拉丁小毛，歡迎大家關(guān)注我哦，一起交流，共同進(jìn)步。有問題可以郵我哦([email protected])
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100942.html
摘要：我是拉丁小毛，歡迎大家關(guān)注我哦，一起交流，共同進(jìn)步。有問題可以郵我哦 webpack4 單獨(dú)抽離打包 css 的新實(shí)現(xiàn) 前言 之前我們使用的打包 css 無非兩種方式：① 將 css 代碼打包進(jìn) 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)實(shí)現(xiàn)【注意，該插件在 webpack4 中已經(jīng)不推薦使用，而且會(huì)出現(xiàn)各種莫名其妙的 bug】正是...
摘要：樣式變多后，命名將更加混亂。缺點(diǎn)是不能利用成熟的預(yù)處理器或后處理器，和偽類處理起來復(fù)雜。經(jīng)過這樣混淆處理后，名基本就是唯一的，大大降低了項(xiàng)目中樣式覆蓋的幾率。就只能使用預(yù)處理器自己的語法來做樣式復(fù)用了。一 前言CSS 是前端領(lǐng)域中進(jìn)化最慢的一塊。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛發(fā)展，CSS 被遠(yuǎn)遠(yuǎn)甩在了后面，逐漸成為大型項(xiàng)目工程化的痛點(diǎn)。也...
摘要：進(jìn)擊基礎(chǔ)篇一進(jìn)擊基礎(chǔ)篇二配置一進(jìn)擊基礎(chǔ)篇三配置二不解析不依賴第三方模塊的模塊有一些第三方模塊，它本身不依賴于其他模塊，比如，，不去編譯這些庫(kù)，會(huì)使得打包更加快速是個(gè)正則或者包含正則的數(shù)組不去解析忽略 進(jìn)擊webpack 4 （基礎(chǔ)篇一）進(jìn)擊webpack4 （基礎(chǔ)篇二：配置 一）進(jìn)擊webpack4 （基礎(chǔ)篇三：配置 二） 不解析不依賴第三方模塊的模塊 noParse 有一些第三方模塊...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
閱讀 2847·2023-04-25 20:02
閱讀 1447·2021-11-11 16:55
閱讀 634·2021-09-26 09:46
閱讀 6226·2021-09-22 15:55
閱讀 1831·2021-08-09 13:41
閱讀 1585·2019-08-30 15:52
閱讀 2387·2019-08-30 14:13
閱讀 3307·2019-08-26 13:48
