using extract plugin in webpack

Base.webpack.js

'use strict';  // eslint-disable-line

/**
 * Webpack configuration base class
 */
const fs = require('fs');
const path = require('path');

const npmBase = path.join(__dirname, '../../node_modules');

class WebpackBaseConfig {

    constructor() {
        this._config = {};
    }

    /**
     * Get the list of included packages
     * @return {Array} List of included packages
     */
    get includedPackages() {
        return [].map((pkg) => fs.realpathSync(path.join(npmBase, pkg)));
    }

    /**
     * Set the config data.
     * This will always return a new config
     * @param {Object} data Keys to assign
     * @return {Object}
     */
    set config(data) {
        this._config = Object.assign({}, this.defaultSettings, data);
        return this._config;
    }

    /**
     * Get the global config
     * @return {Object} config Final webpack config
     */
    get config() {
        return this._config;
    }

    /**
     * Get the environment name
     * @return {String} The current environment
     */
    get env() {
        return 'dev';
    }

    /**
     * Get the absolute path to src directory
     * @return {String}
     */
    get srcPathAbsolute() {
        return path.resolve('./src');
    }

    /**
     * Get the absolute path to tests directory
     * @return {String}
     */
    get testPathAbsolute() {
        return path.resolve('./test');
    }

    /**
     * Get the default settings
     * @return {Object}
     */
    get defaultSettings() {
        const cssModulesQuery = {
            modules: true,
            importLoaders: 1,
            localIdentName: '[name]-[local]-[hash:base64:5]'
        };

        return {
            context: this.srcPathAbsolute,
            devtool: 'eval',
            devServer: {
                contentBase: ['./public/', './src/'],
                publicPath: '/assets/',
                historyApiFallback: true,
                hot: true,
                inline: true,
                port: 3000
            },
            entry: './index.js',
            module: {
                rules: [
                    {
                        enforce: 'pre',
                        test: /\.js?$/,
                        include: this.srcPathAbsolute,
                        loader: 'babel-loader',
                        query: {
                            presets: ['es2015', 'react', 'stage-2','es2017']
                        }
                    },
                    {
                        test: /^.((?!cssmodule).)*\.css$/,
                        loaders: [
                            {loader: 'style-loader'},
                            {loader: 'css-loader'}
                        ]
                    },
                    {
                        test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2|ttf|eot|ico)$/,
                        loader: 'file-loader'
                    },
                    {
                        test: /^.((?!cssmodule).)*\.styl$/,
                        loaders: [
                            {loader: 'style-loader'},
                            {loader: 'css-loader'},
                            {loader: 'stylus-loader'}
                        ]
                    },
                    {
                        test: /\.json$/,
                        loader: 'json-loader'
                    },
                    {
                        test: /\.(js|jsx)$/,
                        include: [].concat(
                            this.includedPackages,
                            [this.srcPathAbsolute]
                        ),
                        loaders: [
                            // Note: Moved this to .babelrc
                            {loader: 'babel-loader'}
                        ]
                    },
                    {
                        test: /\.cssmodule\.(sass|scss)$/,
                        loaders: [
                            {loader: 'style-loader'},
                            {
                                loader: 'css-loader',
                                query: cssModulesQuery
                            },
                            {loader: 'sass-loader'}
                        ]
                    },
                    {
                        test: /\.cssmodule\.css$/,
                        loaders: [
                            {loader: 'style-loader'},
                            {
                                loader: 'css-loader',
                                query: cssModulesQuery
                            }
                        ]
                    },
                    {
                        test: /\.cssmodule\.less$/,
                        loaders: [
                            {loader: 'style-loader'},
                            {
                                loader: 'css-loader',
                                query: cssModulesQuery
                            },
                            {loader: 'less-loader'}
                        ]
                    },
                    {
                        test: /\.cssmodule\.styl$/,
                        loaders: [
                            {loader: 'style-loader'},
                            {
                                loader: 'css-loader',
                                query: cssModulesQuery
                            },
                            {loader: 'stylus-loader'}
                        ]
                    }
                ]
            },
            output: {
                path: path.resolve('./dist/assets'),
                filename: 'app.js',
                publicPath: './assets/'
            },
            plugins: [],
            resolve: {
                alias: {
                    assets: `${this.srcPathAbsolute}/assets/`,
                    actions: `${this.srcPathAbsolute}/actions/`,
                    components: `${this.srcPathAbsolute}/components/`,
                    constants: `${this.srcPathAbsolute}/constants`,
                    config: `${this.srcPathAbsolute}/config/${this.env}.js`,
                    containers: `${this.srcPathAbsolute}/containers/`,
                    reducers: `${this.srcPathAbsolute}/reducers/`,
                    app: `${this.srcPathAbsolute}/app/`,
                    styles: `${this.srcPathAbsolute}/styles/`
                },
                extensions: ['.js', '.jsx'],
                modules: [
                    this.srcPathAbsolute,
                    'node_modules'
                ]
            }
        };
    }
}

module.exports = WebpackBaseConfig;

Dev.webpack.js

'use strict';

/**
 * Default dev server configuration.
 */
const webpack = require('webpack');
const WebpackBaseConfig = require('./Base');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

class WebpackDevConfig extends WebpackBaseConfig {
	constructor() {
		super();
		this.config = {
			devtool: 'cheap-module-source-map',
			entry: [ 'webpack-dev-server/client?http://0.0.0.0:3000/', 'webpack/hot/only-dev-server', './index.js' ],
			plugins: [
				new webpack.HotModuleReplacementPlugin(),
				new webpack.NoEmitOnErrorsPlugin(),
				new BundleAnalyzerPlugin(),
				new webpack.ProvidePlugin({
					$: 'jquery',
					jQuery: 'jquery',
					'window.jQuery': 'jquery'
				})
			]
		};

		this.config.module.rules = this.config.module.rules.concat([
			{
				test: /^.((?!cssmodule).)*\.(sass|scss)$/,
				loaders: [
					{ loader: 'style-loader' },
					{
						loader: 'css-loader',
						options: {
							sourceMap: true
						}
					},
					{
						loader: 'sass-loader',
						options: {
							sourceMap: true
						}
					}
				]
			},
			{
				test: /^.((?!cssmodule).)*\.less$/,
				use: [
					{ loader: 'style-loader' },
					{
						loader: 'css-loader',
						options: {
							sourceMap: true
						}
					},
					{
						loader: 'less-loader',
						options: {
							sourceMap: true
						}
					}
				]
			}
		]);

		// console.log(this.config.module.rules);
	}
}

module.exports = WebpackDevConfig;

dist.webpack.js

'use strict';

/**
 * Dist configuration. Used to build the
 * final output when running npm run dist.
 */
const webpack = require('webpack');
const WebpackBaseConfig = require('./Base');
const CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

const path = require('path');

const ROOT = path.resolve(__dirname, '../..');

function root(args) {
	args = Array.prototype.slice.call(arguments, 0);
	return path.join.apply(path, [ ROOT ].concat(args));
}
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//'babel-polyfill',
class WebpackDistConfig extends WebpackBaseConfig {
	constructor() {
		super();
		this.config = {
			cache: false,
			devtool: 'source-map',
			entry: [ './index.js' ],
			output: {
				path: root('dist'),
				publicPath: '/',
				filename: 'assets/app.js',
				chunkFilename: 'assets/[id].[hash].chunk.js',
				devtoolModuleFilenameTemplate: (info) =>
					path.relative('src', info.absoluteResourcePath).replace(/\\/g, '/')
			},
			plugins: [
				new webpack.DefinePlugin({
					'process.env.NODE_ENV': '"production"'
				}),
				new webpack.optimize.AggressiveMergingPlugin(),
				new ExtractTextPlugin({
					allChunks: true,
					filename: '[name].css'
				}),
				new webpack.NoEmitOnErrorsPlugin(),
				new webpack.ProvidePlugin({
					$: 'jquery',
					jQuery: 'jquery',
					'window.jQuery': 'jquery'
				}),
				new CopyWebpackPlugin([
					{ from: root('public/index.html'), to: root('dist/') },
					{ from: root('public/favicon.ico'), to: root('dist/') },
					{ from: root('public/vendors'), to: root('dist/vendors') },
					{ from: root('src/assets/images'), to: root('dist/assets/images') }
				])
			]
		};

		// Deactivate hot-reloading if we run dist build on the dev server
		this.config.devServer.hot = false;

		this.config.module.rules = this.config.module.rules.concat([
			{
				test: /\.cssmodule\.css$/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [ 'css-loader' ]
				})
			},

			{
				test: /\.(sass|scss)$/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [ 'css-loader', 'sass-loader' ]
				})
			},
			{
				test: /\.less$/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [ 'css-loader', 'less-loader' ]
				})
			}
		]);
	}

	/**
     * Get the environment name
     * @return {String} The current environment
     */
	get env() {
		return 'dist';
	}
}

module.exports = WebpackDistConfig;