Utilisation de mini-CSS-extrait-extrait-plugin et de style-chargeur ensemble

Question

Je suis nouveau dans cette chose Webpack et suivre quelques tutoriels pour apprendre des bases.

Je voudrais utiliser style-loader Pour injecter des feuilles de styles pendant le développement (avec HMR activé) et souhaitez utiliser MiniCssExtractPlugin pour les constructions de production. Mais lorsque j'utilise le plugin MinicsSextractPlugin, je perds la fonction d'injection de style-chargeur.

S'il vous plaît voir mon webPack config:

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    entry: ['./src/index.js'],
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                   {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development'
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        port: 3000
    }
};

Answer 1

Le deuxième paramètre de la fonction attribuée à webpack.config.js à module.exports contient le drapeau mode (--mode [development|production]). Donc, ici, vous pouvez utiliser le mode pour charger MiniCssExtractPlugin.loader ou alors style-loader.

Tout en développant, en utilisant style-loader est plus rapide que d'extraire les styles à chaque fois. Mais en production, vous devez extraire les styles dans des fichiers séparés pour éviter le pépin de chargement sur votre Web, lorsque les styles se chargent après le HTML, et que vous voyez votre page sans styles pendant un moment.

module.exports = (_, { mode }) => ({
  // other options here
  module: {
    rules: [
      // other rules here
      {
        test: /\.s?css$/i,
        use: [
          mode === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
    ],
  },
});

Answer 2

si vous souhaitez utiliser un chargeur spécifique pour un environnement de devir et une autre pour la production, je vous suggère de vous Webpack-fusion , qui vous permettra d'écrire deux fichiers de configuration WebPack distincts en fonction de l'env.Mode VARRIABLE Voici un exemple:

ceci est mon fichier de configuration de site Web principal:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackMerge = require("webpack-merge");
const path = require("path");

const modeConfig = env => require(`./build-utils/webpack.${env}`)(env);

module.exports = ({ mode } = { mode: "production" }) =>
  webpackMerge(
    {
      mode,
      entry: ['./src/index.js'],
      output: {
        filename: 'app.js',
        path: path.resolve(__dirname, "dist")
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
      ]
    },
    modeConfig(mode)
  );

Comme vous pouvez le constater à la ligne 6, j'ai déclaré une variable Modeconfig qui est une fonction qui renvoie la valeur d'exigence basée sur la variable env passue via la commande CLI.

Et maintenant Créez votre webPack.Production.js Dans Build-Utils Dossier Ce dossier contient simplement la configuration de la production EVN:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   module.exports = () => ({
        module: {
        rules: [
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    }
   });

Suivant votre fichier de configuration dev

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = () => ({
            module: {
            rules: [
                {
                    test: /\.(sass|scss)$/,
                    use: [
                        {
                           loader: MiniCssExtractPlugin.loader,
                           options: {
                             hmr: true // since u know this is dev env
                           }
                        },
                        "css-loader",
                        "sass-loader"
                    ]
                }
            ]
        },
        devServer: {
          contentBase: path.join(__dirname, 'dist'),
          compress: true,
          hot: true,
          port: 3000
         }
       });

Maintenant tout ce dont vous avez besoin est exécuté la commande

webpack --env.mode=production

ou alors

webpack --env.mode=development

Answer 3

MinicsSextractPlugin dit En fait, vous ne pouvez pas faire cela:

Ce plugin ne doit être utilisé que sur les constructions de production sans style-chargeur dans la chaîne des chargeurs, surtout si vous souhaitez avoir le développement de la SHR.