My current webpack.config
const webpack = require( 'webpack' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const PurifyCSSPlugin = require( 'purifycss-webpack' );
const autoprefixer = require( 'autoprefixer' );
const mqpacker = require( 'css-mqpacker' );
const combineSelector = require( 'postcss-combine-duplicated-selectors' );
const cssnano = require( 'cssnano' );
// import environmental variables from our variables.env file
require( 'dotenv' ).config( { path : 'variables.env' } );
// This is JavaScript rule that specifies what to do with .js files
const javascript = {
test : /\.(js)$/,
exclude : '/node_modules/',
use : [ { loader : 'babel-loader', query : { presets : [ 'env' ] } } ],
};
const postcss = {
loader : 'postcss-loader',
options : {
sourceMap : true,
plugins () {
return [
autoprefixer( { browsers : 'last 3 versions' } ),
mqpacker( { sort : true } ),
combineSelector( { removeDuplicatedProperties : true } ),
cssnano()
];
}
}
};
// this is our sass/css loader. It handles files that are
const styles = {
test : /\.(scss)$/,
use : ExtractTextPlugin.extract( {
use : process.env.NODE_ENV === 'production'
? [
{ loader : 'css-loader', options : { sourceMap : true } },
postcss,
{
loader : 'sass-loader',
options : { outputStyle : 'expanded', sourceMap : true }
}
]
: [
{ loader : 'css-loader', options : { sourceMap : true } },
{
loader : 'sass-loader',
options : { outputStyle : 'expanded', sourceMap : true }
}
]
} )
};
const fonts = {
test : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use : [ { loader : 'file-loader' } ]
};
const video = {
test : /\.mp4$/,
use : [ { loader : 'file-loader' } ]
};
// this plugins will compress out our JS
const uglify = new webpack.optimize.UglifyJsPlugin( {
compress : { warnings : false }
} );
const config = {
entry : { App : './public/javascripts/app.js' },
stats : { children : false },
output : {
path : '${__dirname}/public/dist',
filename : '[name].bundle.js'
},
module : {
rules : [
javascript,
styles,
fonts
]
},
plugins : [ new ExtractTextPlugin( 'style.css' ) ]
};
if ( process.env.NODE_ENV === 'production' ) {
config.plugins.push(
uglify,
new PurifyCSSPlugin( {
paths : glob.sync( [
'${__dirname}/views/*.pug',
'${__dirname}/views/includes/*.pug',
'${__dirname}/dist/javascripts/*.js'
] ),
minimize : true,
purifyOptions : {
info : true,
// rejected: true
}
} )
);
}
if ( process.env.NODE_ENV === 'development' )
config.devtool = 'source-map';
process.noDeprecation = true;
module.exports = config;