daggrcss/webpack.config.js

A light-weight CSS style framework that focuses on useful responsive default styling and utilities. Daggr leaves the creative parts to the user.

const path = require("path");
const webpack = require("webpack");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const devMode = process.env.NODE_ENV !== "production";

const styleRule = {
  test: /\.(sa|sc|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    { loader: "css-loader", options: { sourceMap: devMode } },
    {
      loader:
        "postcss-loader" /*options: { plugins: () => [autoprefixer({ browsers: ['last 2 versions'] })] }*/,
    },
    "sass-loader",
  ],
};

const jsRule = {
  test: /\.js$/,
  loader: "babel-loader",
  include: path.resolve("./static/src/js/"),
  exclude: /node_modules/,
};

const plugins = [
  new MiniCssExtractPlugin({
    filename: devMode ? "daggr.css" : "daggr.min.css",
    chunkFilename: devMode ? "[id].css" : "[id].[hash].css",
  }),
];

if (devMode) {
} else {
  plugins.push(
    new webpack.EnvironmentPlugin([
      "NODE_ENV",
    ]),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ["./dist/"],
    })
  );
}

module.exports = {
  context: __dirname,
  entry: ["./src/js/index.js", "./src/style/index.scss"],
  output: {
    path: path.resolve("./dist/"),
    filename: devMode ? "daggr.js" : "daggr.min.js",
    // libraryTarget: 'umd',
    // library: 'NerdVenture',
    // publicPath: hotReload ? "http://localhost:8080/static/src/media/" : "",
  },
  devtool: devMode ? "cheap-eval-source-map" : "source-map",

  module: { rules: [jsRule, styleRule] },
  plugins,
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: devMode, // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: true
      })
    ],
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "initial",
        },
      },
    },
  },
  resolve: {
    extensions: [".js", ".scss"],
  },
};