Example Webpack Config File

webpack.config.js

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

module.exports = ( env, options ) => {
	return {
		entry: './src/block.js',

		output: {
			path: path.resolve( __dirname, 'build' ),
			filename: 'block.js',
		},

		devtool: 'cheap-eval-source-map',

		module: {
			rules: [
				{
					test: /\.jsx$|\.es6$|\.js$/,
					use: {
						loader: 'babel-loader',
						options: {
							presets: ['react'],
						}
					},
					exclude: /(node_modules|bower_components)/
				},
				{
					test: /\.css$/,
					use: [
						MiniCssExtractPlugin.loader,
						{
							loader: 'css-loader',
							options: {
								importLoaders: 1,
								minimize: ( options.mode == 'production' ? true : false ),
								sourceMap: true,
							}
						},
						{
							loader: 'postcss-loader',
							options: {
								plugins: [ require( 'autoprefixer' ) ]
							}
						},
					],
				},
				{
					test: /\.(png|jpg|gif)$/,
					use: [
						{
							loader: 'file-loader',
							options: {
								name: '[name].[ext]',
								outputPath: 'images/'
							}
						}
					]
				},
			],
		},

		plugins: [
			new MiniCssExtractPlugin({
				filename: 'style.css',
				chunkFilename: '[id].css'
			})
		],

	}
};

webpack.v1.config.js

const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const autoprefixer = require( 'autoprefixer' );
const precss = require( 'precss' );
const svgFragments = require( 'postcss-svg-fragments' );
const pxtorem = require( 'postcss-pxtorem' );
const cssnano = require( 'cssnano' );
const path = require( 'path' );

module.exports = {
  entry: {
    app: [
      'webpack-dev-server/client?http://localhost:8881/',
      './app/App.js'
    ]
  },

  output: {
    path: path.resolve( __dirname, 'public' ),
    publicPath: '/js/',
    filename: 'main.js',
    sourceMapFilename: 'main.js.map'
  },

  resolve: {
    extensions: ['', '.js', '.jsx', '.es6'],
    modulesDirectories: ['node_modules']
  },

  module: {
    preloaders: [
      { test: /\.jsx$|\.es6$|\.js$/, loader: 'source-map', query: { presets: ['react', 'es2015'] }, exclude: /(node_modules|bower_components)/ }
    ],
    loaders: [
      { test: /\.jsx$|\.es6$|\.js$/, loader: 'babel', query: { presets: ['react', 'es2015'] }, exclude: /(node_modules|bower_components)/ },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') },
      { test: /.*\.(gif|png|jpe?g|svg)$/i, loaders: ['file?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=5'] }
    ]
  },

  devtool: "eval",

  postcss: function() {
    return [
        autoprefixer( { browsers: ['last 2 versions'] } ),
        precss,
        svgFragments,
        cssnano,
        pxtorem( {
          propWhiteList: [] // Enables converting of all properties - default is just font sizes.
        } )
    ];
  },

  plugins: [
    new ExtractTextPlugin( 'public/styles.css', {
      allChunks: true
    } )
  ]
};

Dependencies and Configuration (Latest - v4+)

I created this configuration when developing Gutenberg blocks in WordPress. The setup, however, is still pretty versatile and should be able to be dropped in a project and tweaked to fit that environment and your preferences. Depending on your project requirements, you may want to remove/replace the @wordpress/babel-preset-default package (listed below). See package contents for details.

Installation

To install the necessary modules/dependencies to run the following command:

npm i -D @wordpress/babel-preset-default babel-core babel-eslint babel-loader babel-preset-react classnames cross-env css-loader eslint file-loader mini-css-extract-plugin postcss-loader style-loader webpack webpack-cli

Then add the following scripts to your package.json file:

  "scripts": {
    "dev": "cross-env BABEL_ENV=default webpack --watch --mode development",
    "build": "cross-env BABEL_ENV=default webpack --mode production"
  },

With that, you can use npm run devto watch your files in development or use npm run build to minify everything for production.

If you're not using @wordpress/babel-preset-default, you will also want to use babel-preset-env, along with babel-preset-react. So you would npm install --save-dev babel-preset-env and then in your "presets" definition (on line 23), you'd have "presets": ["env", "react"], instead of just "react". Not shown in the above example file because @wordpress/babel-preset-default includes this (along with babel-plugin-transform-async-generator-functions, babel-plugin-transform-object-rest-spread, babel-plugin-transform-react-jsx,babel-plugin-transform-runtime).

Which version of webpack is this?