webapck將css 打包后多帶帶提取到一個(gè)css文件中

DevTTL 發(fā)布于2019-08-23 14:02 / 2851人閱讀

webpack4 提倡， 一旦用了這個(gè)， 不能使用style-loader 以及css module

安裝

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

rules

rules: [
      {
        test: /.css$/,
        use: [ {
          loader: MiniCssExtractPlugin.loader,
          options: {
            // you can specify a publicPath here
            // by default it use publicPath in webpackOptions.output
            publicPath: "../"
          }
        }, "css-loader"]
      }
    ]

plugins

new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: _modeflag ? "styles/[name].[hash:5].css" : "styles/[name].css",
      chunkFilename: _modeflag ? "styles/[id].[hash:5].css" : "styles/[id].css"
    }),

GPU云服務(wù)器云服務(wù)器 c中js將文件上傳到數(shù)據(jù)庫(kù) css中 css入門到精通 html中css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/99987.html

相關(guān)文章

CSS Module

摘要：樣式變多后，命名將更加混亂。缺點(diǎn)是不能利用成熟的預(yù)處理器或后處理器，和偽類處理起來(lái)復(fù)雜。經(jīng)過(guò)這樣混淆處理后，名基本就是唯一的，大大降低了項(xiàng)目中樣式覆蓋的幾率。就只能使用預(yù)處理器自己的語(yǔ)法來(lái)做樣式復(fù)用了。一前言CSS 是前端領(lǐng)域中進(jìn)化最慢的一塊。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛發(fā)展，CSS 被遠(yuǎn)遠(yuǎn)甩在了后面，逐漸成為大型項(xiàng)目工程化的痛點(diǎn)。也...

mingzhong 2019-08-29 16:06 評(píng)論0 收藏0
webpack的配置和安裝（2）

摘要：是用來(lái)做瀏覽器兼容的，這個(gè)必須要配置，否則在打包的時(shí)候就會(huì)報(bào)錯(cuò)，在這個(gè)中我們引用了之前安裝的，這個(gè)是用來(lái)自動(dòng)匹配瀏覽器來(lái)補(bǔ)全前綴的，然后我們?cè)O(shè)置為最近五個(gè)瀏覽器版本。上一篇文章講述了如何安裝和配置webpack的基礎(chǔ)依賴，可以看鏈接描述這篇文章我們來(lái)看看如何配置webpack最重要的配置文件webpack.config.js 首先我們先在根目錄下新建一個(gè)webpack.config...

chadLi 2019-08-22 16:09 評(píng)論0 收藏0
webpack4.x升級(jí)摘要

摘要：以為例，編寫來(lái)幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫(kù)使用各種模塊化寫法以及語(yǔ)法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做軟件開(kāi)發(fā)工程師在那個(gè)時(shí)代，大家可能...

levinit 2019-08-23 18:11 評(píng)論0 收藏0
【翻譯向】webpack2 指南（上）

摘要：原文發(fā)布與抹橋的博客翻譯向指南上前置定義代碼包代碼塊安裝代碼分割代碼分割是中最引人注目的功能之一。回調(diào)函數(shù)一個(gè)回調(diào)函數(shù)會(huì)被執(zhí)行一次當(dāng)所有依賴都被加載以后。對(duì)象的實(shí)現(xiàn)作為一個(gè)參數(shù)傳遞給這個(gè)回調(diào)函數(shù)。原文發(fā)布與抹橋的博客 -【翻譯向】webpack2 指南（上）前置定義 Bundle 代碼包Chunk 代碼塊安裝 npm install webpack --save-dev 代碼分...

史占廣 2019-08-20 14:04 評(píng)論0 收藏0
終極蛇皮上帝視角之微信小程序之告別“刀耕火種”

開(kāi)門見(jiàn)山地說(shuō)，小程序在日常開(kāi)發(fā)中使用原生框架來(lái)開(kāi)發(fā)還是挺不方便的，比如：不支持 npm 包不支持各種 CSS 預(yù)編譯器不支持配置 Babel 來(lái)轉(zhuǎn)換一些 JavaScript 新特性這樣一來(lái)和日常開(kāi)發(fā)前端頁(yè)面的體驗(yàn)相比來(lái)說(shuō)，簡(jiǎn)直就像在刀耕火種。那么為了解決這些問(wèn)題，我們能不能將前端開(kāi)發(fā)中常用的 webpack 移植到小程序開(kāi)發(fā)中呢？當(dāng)然可以！ showImg(https://seg...

TerryCai 2019-08-23 10:58 評(píng)論0 收藏0