Prakata: Webpack memproses css ialah topik yang sangat asas. Cuma dalam webpack4, apabila menggunakan autoprefixer untuk menyelesaikan keserasian penyemak imbas CSS, akan ada perangkap yang berbeza dari sebelumnya. Jadi saya akan menulis tentang pengetahuan ini secara terperinci.
1. Kebergantungan yang diperlukan
- style-loader: Suntikan fail css ke dalam teg gaya halaman html. Rujukan: https://www.webpackjs.com/loa...
- css-loader: menghuraikan fail css yang diimport ke dalam js. Rujukan: https://www.webpackjs.com/loa...
- less-loader: menghuraikan bahasa prapemprosesan css Jika anda menggunakan bahasa prapemprosesan lain, anda mesti menggunakan pemuat yang sepadan. Rujukan: https://www.html.cn/doc/webpa...
-
postcss-loader: Pasca proses css yang kami tulis dalam projek:
- Menghuraikan CSS ke dalam struktur Abstract Syntax Tree (AST) yang boleh dimanipulasi oleh JavaScript
- Panggil pemalam untuk memproses AST dan dapatkan hasilnya.
- autoprefixer: Pemalam untuk pemuat postcss yang memberi awalan css untuk menyesuaikan diri dengan penyemak imbas yang berbeza.
Nota: postcss-loader berfungsi seperti proses pasca produksi filem dan televisyen Ia menggabungkan semua fail asal, kemudian menggunakan pemalam untuk menambah kesan khas, dan akhirnya mengeluarkan produk siap. Pemalam autoprefixer menjalankan pemprosesan pasca pada AST yang dihuraikan oleh pemuat postcss.
Dua, pasang kebergantungan
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
Ketiga, cipta gaya fail ujian yang kurang.kurang
#world{
display: flex;
}
Empat, gaya import.kurang dalam indeks fail utama. js
import './style.less';
5. Fail konfigurasi webpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader',
'postcss-loader'
]
},
]
}
Css-loader’s importLoaders: 1, ialah tetapan yang sangat penting. Ini akan menyebabkan semua css yang dihuraikan disuntik ke dalam satu tag gaya sahaja. Tanpa konfigurasi ini, teg gaya baharu akan dibuat apabila setiap fail CSS baharu disuntik Sesetengah penyemak imbas mempunyai had pada bilangan teg gaya.
Keenam, buat fail konfigurasi postcss postcss.config.js dan perkenalkan pemalam autoprefixer
module.exports = {
plugins: [
require('autoprefixer')
]
}
Ketujuh, tambah senarai penyemak imbas senarai penyemak imbas dalam package.json. Ini adalah perangkap yang disebutkan dalam kata pengantar Tanpa itu, autoprefixer tidak akan berfungsi
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --mode development"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}
8. Jalankan arahan
npm run build
9. Penghuraian css berjaya dan kesannya ialah seperti berikut:
#world {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}