webpack7 css壓縮成單獨的css檔案

2021-09-07 20:27:07 字數 782 閱讀 3587

先看下下面的:

我們可以看到,通過webpack打包後,預設css是通過 內部樣式表 寫入的。我們如何把壓縮後的css單獨匯出為css 呢?

1.安裝 extract-text-webpack-plugin@next

npm i extract-text-webpack-plugin@next -d
2.在webpack.config.js中引入該模組

const extracttextwebpackplugin = require('extract-text-webpack-plugin');
3.在webpack.config.js 中的 plugins 中加入new  extracttextwebpackplugin('css提取出去的路徑') 

plugins: [

new extracttextwebpackplugin('/css/demo.css')

]

4. 修改 webpack.config.js 中的 rules 針對css的設定,如下所示

module: )}]}

5.執行  npm run start,最後結果如下:

可以看到 dist 目錄下面生成了乙個demo.css

感謝閱讀~~

Webpack 4 學習08(壓縮優化css)

壓縮css,去除注釋 引數 意義assetnameregexp 正規表示式,用於匹配需要優化或者壓縮的資源名。預設值是 css g cssprocessor 用於壓縮和優化css 的處理器,預設是 cssnano.cssprocessorpluginoptions 傳遞給cssprocessor的外...

webpack的css壓縮不相容IOS8問題探索

webpack使用postcss的autoprefixer外掛程式,並在壓縮css時使用了cssnano,處理不當的情況下會導致壓縮css後,部分相容字首 比如 webkit 被刪除的問題。postcss的autoprefixer配置如下 autoprefixer css壓縮的配置如下 壓縮css ...

webpack 對 css 壓縮中對字首的處理

在 vue cli 建立的專案中,用預設的 webpack 配置對專案打包後,發現 css 檔案中樣式的字首有所缺失,例如 flex 這個應該有字首的屬性卻沒有 display webkit flex webkit flex 1 導致樣式在 iphone 6s plus 上出現了相容問題。postc...