Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*! webpack.config.js | Build JS, CSS,.. client assets and StyleGuide */
'use strict';
var webpack = require('webpack');
var ExtractTextWP = require('extract-text-webpack-plugin');
var HtmlWP = require('html-webpack-plugin');
var path = require('path');
var moment = require('moment');
var now = moment(new Date());
var titleCase = require('title-case');
var pkg = require('./package');
// Depending on `-p` flag, optimize for production
var production = process.argv.indexOf('-p') > -1;
/* --------------------------------------------------------------------- *\
PROJECT OPTIONS
\* --------------------------------------------------------------------- */
var options = {
/* -------------------------------- *\
PostCSS
\* -------------------------------- */
// PostCSS plugins options
postcss: {
// @see: cssnext.io/usage
cssnext: {
// Browsers list, specify your browser scope.
browsers: [ '> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1', 'ie >= 9' ],
// PostCSS plugins options included in `postcss-cssnext`
features: {
customProperties: {
// Add custom css variables
variables: {},
preserve: false
}
}
},
// @see github.com/corysimmons/lost
lost: {},
// @see github.com/postcss/postcss-easings
easings: {},
// @see github.com/jonathantneal/postcss-write-svg
writesvg: {},
// @see github.com/jonathantneal/mdcss
mdcss: {
destination: path.join(pkg.root.out, 'styleguide')
},
// @see github.com/jonathantneal/postcss-font-magician
fontmagician: {
hosted: path.resolve(__dirname, pkg.root.src, 'fonts')
}
},
/* -------------------------------- *\
Optimization
\* -------------------------------- */
// @see cssnano.co/options
cssnano: {
autoprefixer: false
},
// @see github.com/mishoo/UglifyJS2
uglifyjs: {
mangle: {
// Avoids mangling specific variable names
except: ['require', 'exports', '$']
}
},
// @see npmjs.com/package/image-webpack-loader#imagemin-options
imagemin: {
progressive: true,
optimizationLevel: 5,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4
}
},
/* -------------------------------- *\
Banner
\* -------------------------------- */
// A string, it will be wrapped in a comment
banner: [
now.format('YYYY-MM-DD'),
titleCase(pkg.name),
'@version ' + pkg.version,
'@author ' + pkg.author,
'@license ' + pkg.license,
'Copyrights (c) 2015'
].join('\n')
};
/* --------------------------------------------------------------------- *\
WEBPACK CONFIGURATION
\* --------------------------------------------------------------------- */
var webpackConfig = {
// The base directory for resolving the entry option
context: path.resolve(__dirname, pkg.root.src),
// The entry point for the bundle(s)
entry: {
app: ['./scripts/app.js', './styles/app.css']
},
// Options affecting the output
output: {
path: path.resolve(__dirname, pkg.root.out),
filename: 'assets/js/[name]' + (production ? '.' + pkg.version + '.min' : '') + '.js'
},
// Define dependencies that should be resolved in the target environment
externals: {
// `require('jquery')` is external and available
// on the global var jQuery
'jquery': 'jQuery',
// and for Modernizr
'modernizr': "Modernizr"
},
// Options affecting the resolving of modules
resolve: {
// alias: {},
modulesDirectories: ['node_modules', 'bower_components']
},
// Options affecting the normal modules
module: {
// Array of automatically applied preloaders
preLoaders: [
{
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
],
// Array of automatically applied loaders
loaders: [
{
test: /\.css$/,
loader: ExtractTextWP.extract(
'style-loader',
'css-loader?' + JSON.stringify(options.cssnano) + '!postcss-loader',
{ publicPath: '../' }
)
},
{
test: /images\/.*\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file-loader?name=assets/img/[name].[ext]',
'image-webpack-loader?'+JSON.stringify(options.imagemin)
]
},
{
test: /fonts\/.*\.(woff|woff2|ttf|eot|svg)([\?]?.*)$/i,
loader: 'file-loader?name=assets/font/[name].[ext]'
}
]
},
// ESLint options
eslint: {
configFile: '.eslintrc'
},
// PostCSS plugins configuration
postcss: function(files) {
return [
// Resolve path of an `@import` rule
require('postcss-import')({
addDependencyTo: files
}),
// Use the latest CSS syntax today
require('postcss-cssnext')(options.postcss.cssnext),
// Fractional grid system built with `calc()`
require('lost')(options.postcss.lost),
// Replace easing names to `cubic-bezier()`
require('postcss-easings')(options.postcss.easings),
// Write SVGs directly in CSS
require('postcss-write-svg')(options.postcss.writesvg),
// Flexbox polyfill
require('postcss-flexibility')(),
// Automatic @font-face
require('postcss-font-magician')(options.postcss.fontmagician),
// Nesting rules
require('postcss-nesting')(),
// Extend rules
require('postcss-extend')(),
// Mixins
require('postcss-mixins')(),
// Generate styleguides from CSS comments
require('mdcss')(options.postcss.mdcss),
// Log PostCSS messages in the console
require('postcss-reporter')({
clearMessages: true
})
];
},
// Add additional plugins to the compiler
plugins: [
// Skips the emitting phase when there are errors while compiling
new webpack.NoErrorsPlugin(),
// Moves CSS into a separate output file
new ExtractTextWP('assets/css/[name]' + (production ? '.' + pkg.version + '.min' : '') + '.css', {
allChunks: true
}),
// Automatically loaded modules
new webpack.ProvidePlugin({
// Modernizr: 'modernizr',
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
// Assign the module and chunk ids by occurrence count
new webpack.optimize.OccurenceOrderPlugin(true),
// Define free variables
// new webpack.DefinePlugin({
// 'process.env': {
// BROWSER: JSON.stringify(true),
// NODE_ENV: JSON.stringify('development')
// }
// }),
// Prevents the inclusion of duplicate code
new webpack.optimize.DedupePlugin(),
// Adds a banner to the top of each generated chunk
new webpack.BannerPlugin(options.banner, {
entryOnly: true
}),
// Generates `index.html`
new HtmlWP({
title: titleCase(pkg.name),
// @doc npmjs.com/package/html-minifier#options-quick-reference
// minify: {}
})
],
// Configure the behaviour of `webpack-dev-server`
devServer: {
// Base path for the content
contentBase: path.resolve(__dirname, pkg.root.out),
},
// Output options for the stats
stats: {
colors: true,
modules: true,
reasons: true
},
// Display a compilation progress to stderr
progress: true
};
// Add UglifyJs (options) to the compiler, depending on `-p` flag
if (production) {
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin(options.uglifyjs));
}
module.exports = webpackConfig;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.