Created
December 23, 2015 13:58
-
-
Save nucleartux/b2d0e3e3abd2f8c67357 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
var path = require('path'); | |
// Modules | |
var webpack = require('webpack'); | |
var autoprefixer = require('autoprefixer'); | |
var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
var ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
module.exports = function makeWebpackConfig (options) { | |
/** | |
* Environment type | |
* BUILD is for generating minified builds | |
* TEST is for generating test builds | |
*/ | |
var BUILD = !!options.BUILD; | |
var TEST = !!options.TEST; | |
/** | |
* Config | |
* Reference: http://webpack.github.io/docs/configuration.html | |
* This is the object where all configuration gets set | |
*/ | |
var config = {}; | |
/** | |
* Entry | |
* Reference: http://webpack.github.io/docs/configuration.html#entry | |
* Should be an empty object if it's generating a test build | |
* Karma will set this when it's a test build | |
*/ | |
if (TEST) { | |
config.entry = {} | |
} else { | |
config.entry = { | |
// app: './src/app.js' | |
app: './app/scripts/bootstrap.js' | |
} | |
} | |
/** | |
* Output | |
* Reference: http://webpack.github.io/docs/configuration.html#output | |
* Should be an empty object if it's generating a test build | |
* Karma will handle setting it up for you when it's a test build | |
*/ | |
if (TEST) { | |
config.output = {} | |
} else { | |
config.output = { | |
// Absolute output directory | |
// path: __dirname + '/public', | |
path: __dirname + '/app', | |
// Output path from the view of the page | |
// Uses webpack-dev-server in development | |
publicPath: BUILD ? '/' : 'http://localhost:8080/', | |
// Filename for entry points | |
// Only adds hash in build mode | |
filename: BUILD ? '[name].[hash].js' : '[name].bundle.js', | |
// Filename for non-entry points | |
// Only adds hash in build mode | |
chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js' | |
} | |
} | |
/** | |
* Devtool | |
* Reference: http://webpack.github.io/docs/configuration.html#devtool | |
* Type of sourcemap to use per build type | |
*/ | |
if (TEST) { | |
config.devtool = 'inline-source-map'; | |
} else if (BUILD) { | |
config.devtool = 'source-map'; | |
} else { | |
config.devtool = 'eval'; | |
} | |
/** | |
* Loaders | |
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders | |
* List: http://webpack.github.io/docs/list-of-loaders.html | |
* This handles most of the magic responsible for converting modules | |
*/ | |
// Initialize module | |
config.module = { | |
preLoaders: [], | |
loaders: [{ | |
// JS LOADER | |
// Reference: https://github.com/babel/babel-loader | |
// Transpile .js files using babel-loader | |
// Compiles ES6 and ES7 into ES5 code | |
test: /\.js$/, | |
loader: 'babel', | |
exclude: /node_modules/ | |
}, { | |
// ASSET LOADER | |
// Reference: https://github.com/webpack/file-loader | |
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output | |
// Rename the file using the asset hash | |
// Pass along the updated reference to your code | |
// You can add here any file extension you want to get copied to your output | |
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, | |
loader: 'file' | |
}, { | |
// HTML LOADER | |
// Reference: https://github.com/webpack/raw-loader | |
// Allow loading html through js | |
test: /\.html$/, | |
loader: 'raw' | |
}/*, { | |
test: /\.less$/, | |
loader: "style!css?root=../?sourceMap!postcss!less" | |
}, { | |
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, | |
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' | |
}, | |
{ | |
test: /\.(png|jpg)$/, | |
loader: 'file?name=img/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest | |
}, | |
{ | |
test: [/\.svg/, /\.eot/, /\.ttf/, /\.woff/], | |
loader: 'file?name=fonts/[name].[ext]' | |
}*/] | |
}; | |
// ISPARTA LOADER | |
// Reference: https://github.com/ColCh/isparta-instrumenter-loader | |
// Instrument JS files with Isparta for subsequent code coverage reporting | |
// Skips node_modules and files that end with .test.js | |
if (TEST) { | |
config.module.preLoaders.push({ | |
test: /\.js$/, | |
exclude: [ | |
/node_modules/, | |
/\.test\.js$/ | |
], | |
loader: 'isparta-instrumenter' | |
}) | |
} | |
// CSS LOADER | |
// Reference: https://github.com/webpack/css-loader | |
// Allow loading css through js | |
// | |
// Reference: https://github.com/postcss/postcss-loader | |
// Postprocess your css with PostCSS plugins | |
var cssLoader = { | |
test: /\.less/, | |
// Reference: https://github.com/webpack/extract-text-webpack-plugin | |
// Extract css files in production builds | |
// | |
// Reference: https://github.com/webpack/style-loader | |
// Use style-loader in development for hot-loading | |
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!less') | |
}; | |
// Skip loading css in test mode | |
if (TEST) { | |
// Reference: https://github.com/webpack/null-loader | |
// Return an empty module | |
cssLoader.loader = 'null' | |
} | |
// Add cssLoader to the loader list | |
config.module.loaders.push(cssLoader); | |
/** | |
* PostCSS | |
* Reference: https://github.com/postcss/autoprefixer-core | |
* Add vendor prefixes to your css | |
*/ | |
config.postcss = [ | |
autoprefixer({ | |
browsers: ['last 2 version'] | |
}) | |
]; | |
/** | |
* Plugins | |
* Reference: http://webpack.github.io/docs/configuration.html#plugins | |
* List: http://webpack.github.io/docs/list-of-plugins.html | |
*/ | |
config.plugins = [ | |
// Reference: https://github.com/webpack/extract-text-webpack-plugin | |
// Extract css files | |
// Disabled when in test mode or not in build mode | |
new ExtractTextPlugin('[name].[hash].css', { | |
disable: !BUILD || TEST | |
}) | |
]; | |
// Skip rendering index.html in test mode | |
if (!TEST) { | |
// Reference: https://github.com/ampedandwired/html-webpack-plugin | |
// Render index.html | |
config.plugins.push( | |
new HtmlWebpackPlugin({ | |
// template: './src/index.html', | |
template: './app/index.html', | |
inject: 'body' | |
}) | |
) | |
} | |
// Add build specific plugins | |
config.plugins.push( | |
new webpack.ProvidePlugin({ | |
$: "jquery", | |
jQuery: "jquery" | |
}) | |
) | |
if (BUILD) { | |
config.plugins.push( | |
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin | |
// Only emit files when there are no errors | |
new webpack.NoErrorsPlugin(), | |
// Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin | |
// Dedupe modules in the output | |
new webpack.optimize.DedupePlugin(), | |
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin | |
// Minify all javascript, switch loaders to minimizing mode | |
new webpack.optimize.UglifyJsPlugin() | |
) | |
} | |
/** | |
* Dev server configuration | |
* Reference: http://webpack.github.io/docs/configuration.html#devserver | |
* Reference: http://webpack.github.io/docs/webpack-dev-server.html | |
*/ | |
config.devServer = { | |
// contentBase: './public', | |
contentBase: './app', | |
stats: { | |
modules: false, | |
cached: false, | |
colors: true, | |
chunk: false | |
} | |
}; | |
config.resolve = { | |
root: [ | |
path.resolve('./app') | |
], | |
}; | |
config.debug = true; | |
return config; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment