您好,登錄后才能下訂單哦!
這篇文章主要介紹“webpack4是如何處理css的”,在日常操作中,相信很多人在webpack4是如何處理css的問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”webpack4是如何處理css的”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
前言:webpack 處理css是一個(gè)很基礎(chǔ)的話題。只是在webpack4 里,用autoprefixer解決css 的瀏覽器的兼容性時(shí),會(huì)有個(gè)和以前不一樣的坑。所以就再詳細(xì)的寫一下這方面的知識(shí)。
一,所需依賴
style-loader:將css 文件注入到html 頁面的style 標(biāo)簽中。參考:https://www.webpackjs.com/loa...
css-loader:解析import 到j(luò)s 里的css 文件。參考: https://www.webpackjs.com/loa...
less-loader:解析css 預(yù)處理語言,若使用的是其它的預(yù)處理語言,就要使用與其對(duì)應(yīng)的loader。參考: https://www.html.cn/doc/webpa...
postcss-loader:對(duì)我們?cè)陧?xiàng)目中寫完的css 進(jìn)行后期處理:
把 CSS 解析成 JavaScript 可以操作的抽象語法樹結(jié)構(gòu)(Abstract Syntax Tree,AST),
調(diào)用插件來處理 AST 并得到結(jié)果。
autoprefixer:postcss-loader的插件,為css 加前綴,以適應(yīng)不同瀏覽器。
注:postcss-loader的作用就像影視后期一樣,把所有的原始文件合在一起,然后用插件加上特效,最后輸出成品。autoprefixer 插件就對(duì)postcss-loader 解析出的AST 進(jìn)行后期加工。
二,安裝依賴
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
三,建立less 測(cè)試文件 style.less
#world{ display: flex; }
四,在主文件index.js 中導(dǎo)入style.less
import './style.less';
五,webpack配置文件 webpack.config.js
module: { rules: [ { test: /\.less$/, use: [ 'style-loader', {loader: 'css-loader', options: { importLoaders: 1 } }, 'less-loader', 'postcss-loader' ] }, ] }
css-loader的 importLoaders: 1,是一個(gè)很重要的設(shè)置。這會(huì)讓所有解析完成的css 只注入到一個(gè)style 標(biāo)簽里。若無此配置,每個(gè)新的css 文件在注入時(shí),都會(huì)建立一個(gè)新的style 標(biāo)簽,有的瀏覽器里對(duì)style 標(biāo)簽是有數(shù)量限制的。
六,建立postcss 配置文件 postcss.config.js,在其中引入autoprefixer 插件
module.exports = { plugins: [ require('autoprefixer') ] }
七,在package.json 中添加瀏覽器列表browserslist。這就是前言里說的坑,沒有的話autoprefixer 就不起作用
{ "scripts": { "build": "webpack", "dev": "webpack-dev-server --mode development" }, "browserslist": [ "defaults", "not ie < 11", "last 2 versions", "> 1%", "iOS 7", "last 3 iOS versions" ] }
八,運(yùn)行命令
npm run build
九,css解析成功,效果如下:
#world { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
到此,關(guān)于“webpack4是如何處理css的”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。