-
-
Save rc1021/e557df9d589e2333268dfbd581385512 to your computer and use it in GitHub Desktop.
Example webpack for ES6 unit testing
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'; | |
// Modules | |
var webpack = require('webpack'); | |
var autoprefixer = require('autoprefixer'); | |
var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
var ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
var CopyWebpackPlugin = require('copy-webpack-plugin'); | |
var _ = require('lodash'); | |
/** | |
* Env | |
* Get npm lifecycle event to identify the environment | |
*/ | |
var task = process.env.npm_lifecycle_event; | |
if(_.isNil(task)) | |
{ | |
task = 'test'; | |
} | |
var ENV = task.startsWith('test') ? 'test' : task; | |
module.exports = function makeWebpackConfig () { | |
/** | |
* 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 | |
*/ | |
// [jwarden 7.12.2016] Changing to support generators. | |
// config.entry = ENV === 'test' ? {} : { | |
// app: './src/app.js' | |
// }; | |
// config.entry = ENV === 'test' ? {} : ['babel-polyfill', './src/app.js']; | |
// [jwarden 7.13.2016] Changing temporarely to see if this fixes Karma. | |
config.entry = ['babel-polyfill', './src/app.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 | |
*/ | |
config.output = ENV === 'test' ? {} : { | |
// Absolute output directory | |
path: __dirname + '/dist', | |
// Output path from the view of the page | |
// Uses webpack-dev-server in development | |
publicPath: ENV === 'build' ? '/' : 'http://localhost:8080/', | |
// Filename for entry points | |
// Only adds hash in build mode | |
filename: ENV === 'build' ? '[name].[hash].js' : '[name].bundle.js', | |
// Filename for non-entry points | |
// Only adds hash in build mode | |
chunkFilename: ENV === '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 (ENV === 'test') { | |
config.devtool = 'inline-source-map'; | |
} else if (ENV === 'build') { | |
config.devtool = 'source-map'; | |
} else { | |
config.devtool = 'eval-source-map'; | |
} | |
/** | |
* 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$/, | |
loaders: ['ng-annotate','babel'], | |
exclude: /node_modules/ | |
}, { | |
// 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 | |
test: /\.css$/, | |
// 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. | |
loader: ENV === 'test' ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') | |
}, { | |
// 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' | |
}] | |
}; | |
// 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 (ENV === 'test') { | |
config.module.preLoaders.push({ | |
test: /\.js$/, | |
exclude: [ | |
/node_modules/, | |
/\.test\.js$/ | |
], | |
loader: 'isparta-instrumenter' | |
}) | |
} | |
/** | |
* 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 = []; | |
// Skip rendering index.html in test mode | |
if (ENV !== 'test') { | |
// Reference: https://github.com/ampedandwired/html-webpack-plugin | |
// Render index.html | |
config.plugins.push( | |
new HtmlWebpackPlugin({ | |
template: './src/index.html', | |
inject: 'body' | |
}), | |
// 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: ENV !== 'build'}) | |
) | |
} | |
// Add build specific plugins | |
if (ENV === '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(), | |
// Copy assets from the public folder | |
// Reference: https://github.com/kevlened/copy-webpack-plugin | |
new CopyWebpackPlugin([{ | |
from: __dirname + '/src' | |
}]) | |
) | |
} | |
/** | |
* 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: './src', | |
stats: { | |
modules: false, | |
cached: false, | |
colors: true, | |
chunk: false | |
} | |
}; | |
return config; | |
}(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment