Webpack configuration for Wordpress plugin development. Includes: package file for install and three environmnet build config files.

package.json

{
  "name": "webpack-in-wordpress",
  "version": "1.0.0",
  "description": "Compiles scss into css and babels js files",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.prod.js",
    "start": "webpack --config webpack.config.dev.js --progress --watch",
    "test": "webpack --config webpack.config.test.js --progress --watch"
  },
  "browserslist": [
    "last 3 major versions",
    "> 1%",
    "IE 11",
    "Safari 10.1",
    "iOS 10"
  ],
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "css-loader": "^3.1.0",
    "glob": "^7.1.4",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-jpegtran": "^6.0.0",
    "imagemin-optipng": "^7.0.0",
    "imagemin-svgo": "^7.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^7.1.0",
    "standard": "^13.1.0",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.4.1",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {}
}

webpack.config.dev.js

/**
 * Dev Webpack mode
 * Uses regular Webpack not Webpack-server.
 * Uses BrowserSync to create a local server.
 * Watch mode compiles and reloads on changes.
 * Simplified version doesn't minify, etc.. to make process faster.
 */

const path = require('path');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	mode: 'development',
	entry: {
		myApp_admin: "./src/scss/admin_styles.scss",
		myApp:  [ "./src/index.js" ],
	},
	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname, "assets")
	},
	module: {
		rules: [
			{
				test: /\.s[c|a]ss$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
					},
					'css-loader',
          'sass-loader',
        ],
			},
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "css/[name].css"
		}),
		new BrowserSyncPlugin(
      // BrowserSync options
      {
				files: '**/*.php',
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
				proxy: 'http://yourlocalserver.dev/',
      },
      // plugin options
      {
				// reload: true,
				// injectCss: true, // doesn't work
				injectChanges: true,
      }
    ),

	],
};

webpack.config.prod.js

/**
 * Final production version.
 * Minify CSS and JS
 * Babel and Browser prefix for backwards compatibility
 * Image minification and copy files to assets
 */

const path = require("path");
const webpack = require('webpack'); // to access built-in plugins
// deletes the assets
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// extracts css into a separate file rather than being in the js file
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// minifies css
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
// minifies js
const TerserPlugin = require('terser-webpack-plugin');
// enables autoprefixing and other compatibility fixes from postcssPresetEnv
const postcss = require('postcss');
const postcssPresetEnv = require('postcss-preset-env');
// Copy files from one folder to another
const CopyPlugin = require('copy-webpack-plugin');
// Image optimization
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const glob = require('glob');

module.exports = {
	// splitting into two entries generates multiple css files but unfortunately, also two js files
	entry: {
		myApp_admin: "./src/scss/admin_styles.scss",
		myApp: "./src/index.js"
	},
	output: {
		filename: "js/[name].js",
		path: path.resolve(__dirname, "assets")
	},
	mode: 'production',
	plugins: [
		new webpack.ProgressPlugin(),
		new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
			filename: "css/[name].css"
		}),
		// loads the images into the flow to be processed by the imagemin
		new CopyPlugin([
			{
				from: 'img/**/*',
				to: 'img/[name].[ext]',
				context: 'src/',
			}
		]),
		new ImageminPlugin({
			test: /\.(jpe?g|png|gif|svg)$/i,
      bail: false, // Ignore errors on corrupted images
			cache: true,
      imageminOptions: {
        plugins: [
          ["gifsicle", { interlaced: true }],
          ["jpegtran", { progressive: true }],
          ["optipng", { optimizationLevel: 5 }],
          [
            "svgo",
            {
              plugins: [
                {
                  removeViewBox: false
                }
              ]
            }
          ]
        ]
      }
    })
	],
	optimization: {
		minimizer: [
			new OptimizeCSSAssetsPlugin({
				cssProcessorOptions: {
					discardComments: true,
					map: {
						inline: false,
						annotation: true,
					},
					safe: true,
				},
			}),
			new TerserPlugin({
				parallel: true,
				terserOptions: {
					safari10: true
				}
			}),
		],
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ['@babel/preset-env'],
					}
				}
			},
			{
				test:  /\.scss$/,
				use: [
          MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							ident: 'postcss',
							plugins: [
								require('postcss-preset-env')
							]
						}
					},
          'sass-loader',
        ],
			},
		]
	}
};

webpack.config.test.js

/**
 * Dev Webpack mode for cross-browser fixing
 * Uses regular Webpack not Webpack-server.
 * Uses BrowserSync to create a local server.
 * Watch mode compiles and reloads on changes.
 * Slower, css and js minification version.
 */

const path = require('path')
const webpack = require('webpack')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const TerserPlugin = require('terser-webpack-plugin')
const postcss = require('postcss')
const postcssPresetEnv = require('postcss-preset-env')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    myApp_admin: "./src/scss/admin_styles.scss",
		myApp:  [ "./src/index.js" ],
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'assets')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      },
      {
        test: /\.s[c|a]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-preset-env')
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new CopyPlugin([
      {
        from: 'img/**/*',
        to: 'img/[name].[ext]',
        context: 'src/'
        // dot: true,
        // toType: 'dir',
      }
    ]),
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        files: '**/*.php',
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        proxy: 'http://yourlocalserver.dev/',
      },
      // plugin options
      {
        // reload: true,
        // injectCss: true, // doesn't work
        injectChanges: true
      }
    )
  ],
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          discardComments: true,
          map: {
            inline: false,
            annotation: true
          },
          safe: true
        },
      }),
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          safari10: true
        }
      })
    ]
  }
}