webpack4 css打包壓縮問題的解決
這兩天一直在練習(xí)這個(gè)webpack4, 發(fā)現(xiàn)有好多問題和坑,做開發(fā)嘛,一定要有喜歡出問題并喜歡解決問題,堅(jiān)決踩個(gè)坑填個(gè)坑的不怕死小強(qiáng)精神!
webpack4 在配置上其實(shí)是可以是想production和development的,
// webpack.config.js module.exports = { // webpack會(huì)根據(jù)mode進(jìn)行對Js打包,development壓縮,production下面自動(dòng)壓縮,親測沒有問題 mode: 'development' // production }
但是從js里面分離出來的css怎么打包呢?
我找了一天的相關(guān)文章,好多都是說webpack自動(dòng)支持css壓縮,有的是說需要插件,對,就是用插件
optimize-css-assets-webpack-plugin
不過一定要看Npm官方網(wǎng)站
⚠️ For webpack v3 or below please use optimize-css-assets-webpack-plugin@3.2.0. The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.
做法是先安裝 optimize-css-assets-webpack-plugin
const optimizeCss = require('optimize-css-assets-webpack-plugin'); module.exports = { ....., // plugins: [ new optimizeCss({ assetNameRegExp: /\.style\.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }), ], // 這個(gè)還待研究,看字面意思是優(yōu)化的意思 optimization: { // minimize: true, minimizer: [new optimizeCss({})], } }
以上里面的代碼我也是看別人寫的,所以還需要安裝一個(gè)'cssnano'的包
之后運(yùn)行生產(chǎn)環(huán)境打包命令,哦也,css果然壓縮了,但是看js,居然沒有被壓縮,不加上述代碼的話js確實(shí)是默認(rèn)壓縮的,于是網(wǎng)上又找解決方案,都說webpack4只要設(shè)置mode production即可,但是現(xiàn)在有個(gè)問題,壓縮了css之后js就不會(huì)壓縮,于是帶著試試看的心里繼續(xù)安裝之前壓縮Js的插件 uglify-webpack-plugin
最后發(fā)現(xiàn)問題解決了,只是我的心得,也是誤打誤撞,但如果有好的解決方案請大家積極留言,共同進(jìn)步,把webpack吃透!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
swiper 解決動(dòng)態(tài)加載數(shù)據(jù)滑動(dòng)失效的問題
下面小編就為大家分享一篇swiper 解決動(dòng)態(tài)加載數(shù)據(jù)滑動(dòng)失效的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02ECMAScript?的?6?種簡單數(shù)據(jù)類型
這篇文章主要介紹了ECMAScript的?6?種簡單數(shù)據(jù)類型,ECMAScript的數(shù)據(jù)類型很靈活,一種數(shù)據(jù)類型可以當(dāng)作多種數(shù)據(jù)類型來使用,具體使用詳情文章詳細(xì)介紹需要的小伙伴可以參考一下2022-06-06JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動(dòng)小精靈的案例代碼,本文分步驟給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12