Mari kita bincangkan tentang cara webpack4 mengendalikan css

Webpack4 memproses css

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;
}

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara webpack4 mengendalikan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!