《基于 Vue 組件庫(kù) 的 Webpack5 配置》3.將 CSS 提取到單獨(dú)的文件

2年前作者：AvatarGiser分類(lèi)：Toy博客閱讀(27)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了《基于 Vue 組件庫(kù) 的 Webpack5 配置》3.將 CSS 提取到單獨(dú)的文件。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

使用 webpack 插件 mini-css-extract-plugin 需要額外安裝 npm i mini-css-extract-plugin@latest -D；
同時(shí)打包 js 和 css 文件時(shí)，可參考 entry 高級(jí)用法；

package.json 的配置如下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-680084.html

const { VueLoaderPlugin } = require('vue-loader');
// 可將CSS提取到單獨(dú)的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'production',
    entry: {
      "my-webcomponents": ['./index.js', './src/assets/stylus/main.styl'],
      "my-webcomponents2": ['./index2.js', './src/assets/stylus/main2.styl'],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        clean: true, 
    },
    plugins: [
        new VueLoaderPlugin(),        
        new MiniCssExtractPlugin({
            filename: "[name].css",
            // filename: "main.css", // 也可以指定名稱(chēng)，但css只會(huì)輸出一個(gè)
        }),
    ],
}

到了這里，關(guān)于《基于 Vue 組件庫(kù) 的 Webpack5 配置》3.將 CSS 提取到單獨(dú)的文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

《基于 Vue 組件庫(kù) 的 Webpack5 配置》9.module.exports 可為數(shù)組類(lèi)型且注意編譯順序
module.exports 常見(jiàn)是對(duì)象類(lèi)型，其實(shí)也可用數(shù)組類(lèi)型；注意編譯順序，從后往前編：也就是說(shuō)先編 another.js ，再編 index.js ；所以代碼第 9 行不能設(shè)置為 true ，僅在第一次，也就是代碼第19行設(shè)置一次即可清空整個(gè) output 文件夾；如果代碼第 9 行設(shè)置為 true ，則在編 i
2024年02月08日
瀏覽(23)
《基于 Vue 組件庫(kù) 的 Webpack5 配置》6.將字體庫(kù)和圖片等靜態(tài)資料，編譯后打包至指定文件夾
參考 Rule.generator.filename package.json 的配置如下
2024年02月11日
瀏覽(29)
基于 Vue3 + Webpack5 + Element Plus Table 二次構(gòu)建表格組件
基于 Vue3 + Webpack5 + Element Plus Table 二次構(gòu)建表格組件，開(kāi)箱即用 A Vue 3.x Table Component built on Webpack 5 該組件庫(kù)可供學(xué)習(xí)、參考和用于二次開(kāi)發(fā)。 1.基于 Webpack 5 構(gòu)建 2.全面支持 Vue 3 3.支持 JSON 序列化表格快速配置 4.已內(nèi)置 Pagination 分頁(yè) 5.支持自定義 prop 列名 6.支持單元格內(nèi)容自
2024年04月13日
瀏覽(29)
《Webpack5 升級(jí)》- Vue2.x 組件庫(kù) Webpack3 升 5
基于 Vue2.x 的項(xiàng)目和組件庫(kù)開(kāi)發(fā)于 2019 年，那時(shí)對(duì) Webpack 版本沒(méi)有概念，項(xiàng)目和組件庫(kù)的版本混亂…有的使用 v3 ，有的使用 v4 … 對(duì)于現(xiàn)今 2023 年（或 2024 年）的整個(gè)生態(tài)環(huán)境是不夠用的，無(wú)法使用較新和更優(yōu)秀的插件。所以升級(jí) 勢(shì)在必行！注意本篇是基于 Vue2.x 組件庫(kù)
2024年02月03日
瀏覽(17)
基于vue3+webpack5+qiankun實(shí)現(xiàn)微前端
一主應(yīng)用改造（又稱(chēng)基座改造） 1 在主應(yīng)用中安裝qiankun(npm i qiankun -S) ?2 在src下新建micro-app.js文件，用于存放所有子應(yīng)用。 ?3 改造vue.config.js，允許跨域訪(fǎng)問(wèn)子應(yīng)用頁(yè)面 ?4 改造main.js ? 5 在App.vue中寫(xiě)響應(yīng)跳轉(zhuǎn)子應(yīng)用（根據(jù)自己的項(xiàng)目找對(duì)應(yīng)位置寫(xiě)，不局限于App.vue） ? 需要注
2024年02月13日
瀏覽(30)
webpack5基礎(chǔ)使用（1）-介紹、打包文件、處理樣式資源（css、less）文件、配置文件內(nèi)容、eslint工具檢測(cè)語(yǔ)法、babel工具es6語(yǔ)法轉(zhuǎn)es5
webpack5是一個(gè) 靜態(tài)資源打包工具。會(huì)以一個(gè)或多個(gè)文件作為打包的入口，將整個(gè)項(xiàng)目所有文件編譯組合成一個(gè)或多個(gè)文件輸出出去。輸出的文件就是編譯好的文件，就可以直接在瀏覽器端運(yùn)行了進(jìn)一步來(lái)說(shuō)就是：當(dāng)開(kāi)發(fā)時(shí)，肯定會(huì)使用框架、es6模塊化語(yǔ)法、less/sass等css預(yù)處
2024年02月03日
瀏覽(18)
使用webpack5+TypeScript+npm發(fā)布組件庫(kù)
? ? ? ? 作為一只前端攻城獅，沒(méi)有一個(gè)屬于自己的組件庫(kù)，那豈不是獅子沒(méi)有了牙齒，士兵沒(méi)有了武器，姑娘沒(méi)有了大寶SOD蜜，你沒(méi)有了我.... ? ? ? ? 言歸正傳，下面將給大家介紹如何通過(guò)webpack5編譯一個(gè)TS組件發(fā)布到NPM平臺(tái)。 ? ? ? ? 1、通過(guò)webpack5初始化一個(gè)typescript環(huán)
2024年04月16日
瀏覽(19)
webpack處理CSS文件，打包到單獨(dú)的文件、壓縮、以及兼容性處理
如上圖： Css 文件目前被打包到 js 文件中，當(dāng) js 文件加載時(shí)，會(huì)創(chuàng)建一個(gè) style 標(biāo)簽來(lái)生成樣式這樣對(duì)于網(wǎng)站來(lái)說(shuō)，如果網(wǎng)絡(luò)比較慢的話(huà)會(huì)出現(xiàn)閃屏現(xiàn)象，用戶(hù)體驗(yàn)不好我們?nèi)タ刂婆_(tái)將往速調(diào)慢，然后運(yùn)行打包好的index.html文件如圖：會(huì)出現(xiàn)一段閃屏現(xiàn)象。我們應(yīng)該是單獨(dú)
2024年02月09日
瀏覽(22)
webpack5高級(jí)配置
注意：webpack5基本配置只是打包產(chǎn)出一個(gè)html文件?，想要產(chǎn)出多個(gè)html就需要進(jìn)行過(guò)入口的配置 webpack.common.js 注意：公共文件中的入口需要引入兩個(gè)js文件 ?webpack.prod.js 注意：輸出的時(shí)候利用[name]根據(jù)輸入的文件名來(lái)確定導(dǎo)出的文件名稱(chēng)！ webpack.common.js 注意：針對(duì)多個(gè)html文件
2024年02月15日
瀏覽(43)
Webpack5 搭建Vue項(xiàng)目（進(jìn)階版）
提示：中間隔了好長(zhǎng)時(shí)間，我胡漢三又回來(lái)繼續(xù)更新了?。。?????? 提示：文章涉及的一些內(nèi)容僅供參考：大多數(shù)情況下，大家在項(xiàng)目開(kāi)發(fā)的過(guò)程中，基本很少去說(shuō)讓開(kāi)發(fā)人員去自助的搭建一個(gè)Vue項(xiàng)目。基本都是使用現(xiàn)成的一些模版項(xiàng)目，直接在上面進(jìn)行一個(gè)二次的開(kāi)發(fā)
2024年02月09日
瀏覽(19)