Configuring Webpack in WordPress for the First Time | https://www.ibenic.com/configuring-webpack-wordpress

config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

config10.js

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'assets/js')
},
// Adding jQuery as external library
externals: {
  jquery: 'jQuery'
},
module: {

config2.js

const path = require('path');

module.exports = {
  entry: {
     admin: './assets/js/admin.js',
     public: './assets/js/public.js',
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'assets/js')
  }
};

config3.js

const path = require('path');

module.exports = {
  entry: {
     admin: './assets/js/admin.js',
     public: './assets/js/public.js',
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'assets/js')
  },
  module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        }
      ]
    }
};

config4.js

const path = require('path');
// Including our UglifyJS
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
     admin: './assets/js/admin.js',
     public: './assets/js/public.js',
  },
  plugins: [
    // Adding our UglifyJS plugin
    new UglifyJSPlugin()
  ],
  output: {

config5.js

// ...
rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['babel-preset-env']
      }
    }
  },
  // Our new rules
  {
    test: /\.css$/,
    loader: 'style-loader',
  },
  {
    test: /\.css$/,
    loader: 'css-loader',
    options: {
      minimize: true
    }
  }
]
// ...

config6.js

// JS rule
},
{
  test: /\.scss$/,
  use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }]
}, 
{
  test: /\.css$/,

config7.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// Our new plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: "../css/[name].min.css",
});

config8.js

plugins: [
  new UglifyJSPlugin(),
  // Adding our new plugin in plugins list
  extractSass
],

config9.js

// Changing our SCSS rule completely
{
  test: /\.scss$/,
  use: extractSass.extract({
      use: [{
          loader: "css-loader",
          options: {
            minimize: true
          }
      }, {
          loader: "sass-loader"
      }],
      // use style-loader in development
      fallback: "style-loader"
  })
}, 

package-init.json

{
  "name": "webpack-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

public.js

import css from '../css/style.css'; 
'use strict';

(function($) {
  $(function() {
    console.log(() => { });
    console.log('Loaded'); 

  });
})(jQuery);

script.json

"scripts": {
  "build": "webpack",
  "watch": "webpack --watch"
},

webpack.config.js

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: "../css/[name].min.css",
});

module.exports = {
  entry: {
    admin: './assets/js/admin.js',
    public: './assets/js/public.js'
  },
  plugins: [
    new UglifyJSPlugin(),
    extractSass
  ],
  externals: {
    jquery: "jQuery"
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve( __dirname, 'assets/js' )
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env']
                }
            }
        },
        {
            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: true
                    }
                },
                {
                    loader: "sass-loader"
                }],
                fallback: "style-loader"
            })
        },
        {
            test: /\.css$/,
            loader: 'style-loader'
        },
        {
            test: /\.css$/,
            loader: 'css-loader',
            options: {
                minimize: true
            }
        }
    ]
  }
};