webpack

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// Set different CSS extraction for editor only and common block styles
const blocksCSSPlugin = new ExtractTextPlugin({
  filename: "./assets/css/countdown.build.css"
});
const editBlocksCSSPlugin = new ExtractTextPlugin({
  filename: "./assets/css/countdown.editor.build.css"
});

// Configuration for the ExtractTextPlugin.
const extractConfig = {
  use: [
    { loader: "raw-loader" },
    {
      loader: "postcss-loader",
      options: {
        plugins: [require("autoprefixer")]
      }
    },
    {
      loader: "sass-loader",
      query: {
        outputStyle:
          "production" === process.env.NODE_ENV ? "compressed" : "nested"
      }
    }
  ]
};
// Configuration for the babel.
const buildJS = {
  loader: "babel-loader",
  options: {
    presets: ["@wordpress/default"],
    plugins: [
      [
        "@babel/plugin-transform-react-jsx",
        { pragma: "wp.element.createElement" }
      ]
    ]
  }
};

module.exports = {
  mode: 'development',
  entry: {
    './assets/js/countdown.editor.build': './block/js/countdown.editor.js',
    './assets/js/countdown.build' : './block/js/countdown.js',
  },
  output: {
    path: path.resolve(__dirname),
    filename: "[name].js"
  },
  devtool: "cheap-eval-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: buildJS
      },
      {
        test: /block\/css\/styles\/.*\.s?css$/,
        use: blocksCSSPlugin.extract(extractConfig)
      },
      {
        test: /block\/css\/editor-styles\/.*\.s?css$/,
        use: editBlocksCSSPlugin.extract(extractConfig)
      }
    ]
  },
  plugins: [blocksCSSPlugin, editBlocksCSSPlugin]
};