webpack-extract-css-demo

webpack-extract-css-demo

/** native nodejs packages **/
const path = require("path");
const fs = require("fs");

/** post css import css **/
const postCssImport = require("postcss-import");

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

/** webpack optimization plugin **/
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");

// get entries for multiple files
const getEntries = () => {
  const componentsPath = path.resolve(__dirname, "src/components");
  const components = fs.readdirSync(componentsPath);
  const entries = {};

  components.map(component => {
    entries[component] = `./src/components/${component}/index.js`;
  });
  return entries;
};

module.exports = {
  entry: getEntries(),
  output: {
    path: path.resolve(__dirname, "./out"),
    filename: "[name].js",
    libraryTarget: "commonjs2"
  },
  externals: ["react", "react-dom"],
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true
        }
      }
    },
    minimizer: [
      new TerserJSPlugin({}),
      new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ["default"]
        }
      })
    ]
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader",
            options: {
              camelCase: true,
              importLoaders: 1,
              import: true,
              modules: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: () => [
                postCssImport({
                  path: ["src"]
                })
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "sample.[name].[contentHash].css"
    })
  ]
};