webpack4 が CSS をどのように処理するかについて話しましょう

Webpack4 の CSS 処理

前書き: Webpack の CSS 処理は非常に基本的なトピックです。ただ、webpack4 では CSS ブラウザ互換性を解決するために autoprefixer を使用する際に、これまでとは異なる落とし穴が存在します。そこでこの知識について詳しく書いていきます。

1. 必要な依存関係

• style-loader: CSS ファイルを HTML ページのスタイル タグに挿入します。参考: https://www.webpackjs.com/loa...
• css-loader: js にインポートされた CSS ファイルを解析します。参考: https://www.webpackjs.com/loa...
• less-loader: css 前処理言語を解析します。他の前処理言語を使用する場合は、対応するローダーを使用する必要があります。参考: https://www.html.cn/doc/webpa...

• postcss-loader: プロジェクトに記述した CSS の後処理:

  • CSS を JavaScript が操作できる抽象構文ツリー (AST) 構造に解析します。
  • プラグインを呼び出して AST を処理し、結果を取得します。
• autoprefixer: さまざまなブラウザに適応するために css にプレフィックスを付ける postcss-loader のプラグイン。

注: postcss-loader の機能は、映画やテレビのポストプロダクションとまったく同じで、すべての元のファイルを結合し、プラグインを使用して特殊効果を追加し、最後に出力します。完成品。 autoprefixer プラグインは、postcss-loader によって解析された AST に対して後処理を実行します。

2. 依存関係をインストールします

npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer

3. 少ないテスト ファイル style.less

#world{
  display: flex;
}

を作成します#4. style.less

import './style.less';

をメイン ファイルindex.js にインポートします5、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は非常に重要な設定です。これにより、解析されたすべての CSS が 1 つのスタイル タグのみに挿入されます。この設定を行わないと、新しい CSS ファイルが挿入されるたびに新しいスタイル タグが作成されます。ブラウザによっては、スタイル タグの数に制限がある場合があります。

6 番目に、postcss 構成ファイル postcss.config.js を作成し、自動プレフィクサー プラグインを導入します

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

7 番目に、package.json にブラウザー リスト browserslist を追加します。これが序文で述べた落とし穴です。これがないと自動プレフィクサーは機能しません

{
 "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、コマンド

npm run build

を実行します 9、CSS の解析が成功すると、結果は次のようになります:

#world {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

推奨学習: 「

css ビデオ チュートリアル 」

以上がwebpack4 が CSS をどのように処理するかについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。