webpack解決css兼容性問題小結

更新時間：2024年05月15日 09:39:05 作者：小強有個dream

這篇文章主要介紹了webpack解決css兼容性問題小結,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

webpack解決css兼容性示例

npm install --save-dev postcss-loader autoprefixer

webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
    },
    // mode: 'production', // 或者 'production'
    module: {
        rules: [{
            test: /\.css$/i,
            use: [
                'style-loader',
             'css-loader',
             'postcss-loader'
            ]
        }]
    },
}

創(chuàng)建postcss.config.js文件

postcss.config.js
module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: [
                '> 1%',
                'last 2 versions',
                'not ie <= 8'
            ]
        }
    }
}

src/index.js
import './module.css'
src/module.css
body {
    display: flex;
}

在打包的js文件中搜索webkit 或在瀏覽器打包審查元素，可以看到前綴是有生效的

到此這篇關于webpack解決css兼容性示例：的文章就介紹到這了,更多相關webpack解決css兼容性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

非常漂亮的讓背景如此暗淡（一種彈出提示信息時頁面背景色調(diào)改變的方法）
非常漂亮的讓背景如此暗淡（一種彈出提示信息時頁面背景色調(diào)改變的方法）...
2007-04-04
JavaScript漢字轉拼音正確的解決步驟
這篇文章主要介紹了解決pinyin-pro或pinyin.js庫方法未定義問題的步驟,包括正確下載、放置文件、使用相對路徑引用、檢查路徑及加載順序,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-06-06
weui框架實現(xiàn)上傳、預覽和刪除圖片功能代碼
weui框架暫時只有css文件，并沒有js文件實現(xiàn)其功能，我在其html+css后面增加了js實現(xiàn)其功能，為大家提供方便，也為自己保存記錄。具體實例代碼大家參考下本文
2017-08-08
javascript 中iframe高度自適應（同域）實例詳解
這篇文章主要介紹了javascript 中iframe高度自適應（同域）實現(xiàn)代碼的相關資料,需要的朋友可以參考下
2017-05-05
原生JS實現(xiàn)首頁進度加載動畫
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)首頁進度加載動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
js下為表格內(nèi)部動態(tài)添加行的代碼
最近的一個項目中在保存表單數(shù)據(jù)時，要用到一個動態(tài)添加行的功能。平時動態(tài)添加行只是在表格的最下面添加，現(xiàn)在在表格中間動態(tài)添加行，而且表格內(nèi)部是包含并且單元格的，其實很簡單，下面貼出代碼。
2010-06-06
極簡主義法編寫JavaScript類
荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法，他稱這種方法為"極簡主義法"（minimalist approach）。下面通過本文給大家分享極簡主義法編寫JavaScript類的相關知識，一起看看吧
2017-11-11
Javascript中的delete介紹
關于JavaScript中的Delete一直沒有弄的很清楚，最近看到兩篇這方面的文章，現(xiàn)對兩文中部分內(nèi)容進行翻譯(內(nèi)容有修改和添加，順序不完全一致，有興趣推薦看原文)，希望能對大家有所幫助
2012-09-09
JavaScript面試題(指針、帽子和女朋友)
本文小編給大家分享一道js面試題--指針、帽子和女朋友的題目，非常有意思，感興趣的朋友參考下吧
2016-11-11
js使彈層下面的body禁止?jié)L動
這篇文章介紹了js使彈層下面body禁止?jié)L動的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06