web-dev-qa-db-fra.com

Webpack 4: plug-in mini-css-extract + sass-loader + splitChunks

J'ai l'exemple de configuration suivant pour utiliser mini-css-extract-plugin avec Webpack 4:

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
            }
        }
    }
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "dist/[name].css",
    }),
]

Et les fichiers Sass suivants:

// a.scss
@import 'libA.scss';
@import 'libB.css';
[...] 

// b.scss
@import 'libA.scss';
@import 'libB.css';
[...]

Quand je lance webpack libB.css est inséré dans dans commons.css bundle tandis que libA.scss ne pas.

En général chaque importation de .css Le fichier est traité par l’option splitChunks (uniquement si l’extension css est spécifiée dans le nom), mais pas l’importation sass.

J'ai un projet avec plusieurs points d'entrée Sass et de nombreux composants @import of sass et j'aimerais créer un ensemble commun avec des modules sass partagés.

csswebpacksasssass-loaderwebpack-4
17
Andrea Moraglia

je fais quelque chose comme ça dans ma configuration Webpack 4.

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module: {
rules: [ {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          sourceMap: true,
          importLoader: 2
        }
      },
      "sass-loader"
    ]}
  ]
},

plugins: [
   new MiniCssExtractPlugin({
  // Options similar to the same options in webpackOptions.output
  // both options are optional
  filename: "style.css",
  chunkFilename: "[name].css"
]

Je donne aussi un objet de configuration "output.publicPath" à pointer dans mon répertoire de construction, exemple ->

output: {
   filename: "[name]-min.js",
   path: path.resolve(__dirname, "dist"),
   publicPath: "/static/react/dist/"
},

edit Si vous êtes intéressé par le fractionnement de code, Webpack 4 peut le faire "directement". Cela divisera .js et aussi .css -files pour vous au cas où vous utiliseriez des importations dynamiques.

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

Si votre autre main souhaite fusionner uniquement votre .css dans un fichier que vous pouvez ajouter comme suit.

optimization: {
    splitChunks: {
      chunks: 'all'
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      }
    },
}
14
Jimi Pajala