Skip to content

Instantly share code, notes, and snippets.

@dstuecken
Created December 28, 2016 10:50
Show Gist options
  • Save dstuecken/e111a2eef687521263da008c8f3975d8 to your computer and use it in GitHub Desktop.
Save dstuecken/e111a2eef687521263da008c8f3975d8 to your computer and use it in GitHub Desktop.
"dependencies": {
"babel-polyfill": "6.16.0",
"chalk": "1.1.3",
"compression": "1.6.2",
"cross-env": "3.1.3",
"express": "4.14.0",
"fontfaceobserver": "2.0.5",
"history": "3.0.0",
"immutable": "3.8.1",
"ip": "1.1.3",
"jwt-simple": "^0.5.0",
"minimist": "1.2.0",
"react": "15.3.2",
"react-addons-create-fragment": "^15.3.1",
"react-async-script-loader": "^0.2.1",
"react-dom": "15.3.2",
"react-helmet": "3.1.0",
"react-paginate": "^2.2.3",
"react-redux": "4.4.5",
"react-router": "3.0.0",
"react-router-redux": "4.0.6",
"react-router-scroll": "0.3.3",
"react-select": "file:///Users/dstuecken/coding/js/react-select",
"react-settings-pane": "file:///Users/dstuecken/coding/js/react-settings-pane",
"react-stripe-checkout": "^2.2.1",
"react-timeago": "^3.1.2",
"redux": "3.6.0",
"redux-immutable": "3.0.8",
"redux-saga": "0.12.0",
"reselect": "2.5.4",
"sanitize.css": "4.1.0",
"stardust": "^0.35.1",
"whatwg-fetch": "^1.0.0"
},
"devDependencies": {
"babel-cli": "6.18.0",
"babel-core": "6.18.0",
"babel-eslint": "7.1.0",
"babel-loader": "6.2.7",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.10",
"babel-preset-es2015": "6.9.0",
"babel-preset-es2015-webpack": "6.4.1",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.16.0",
"chai": "3.5.0",
"chai-enzyme": "0.5.0",
"cheerio": "0.20.0",
"coveralls": "2.11.11",
"css-loader": "0.23.1",
"enzyme": "2.4.1",
"eslint": "3.0.1",
"eslint-config-airbnb": "9.0.1",
"eslint-import-resolver-webpack": "0.3.2",
"eslint-plugin-import": "1.10.2",
"eslint-plugin-jsx-a11y": "2.0.0",
"eslint-plugin-react": "5.2.2",
"eventsource-polyfill": "0.9.6",
"expect": "1.20.2",
"expect-jsx": "2.6.0",
"exports-loader": "0.6.3",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.22.0",
"image-webpack-loader": "2.0.0",
"imports-loader": "0.6.5",
"ip": "1.1.3",
"isparta": "4.0.0",
"isparta-loader": "2.0.0",
"json-loader": "0.5.4",
"karma": "1.1.1",
"karma-chrome-launcher": "1.0.1",
"karma-coverage": "1.1.0",
"karma-firefox-launcher": "1.0.0",
"karma-ie-launcher": "1.0.0",
"karma-mocha": "1.1.1",
"karma-mocha-reporter": "2.0.4",
"karma-safari-launcher": "1.0.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.7.0",
"lint-staged": "2.0.2",
"lodash": "4.13.1",
"minimist": "1.2.0",
"mocha": "2.5.3",
"ngrok": "2.2.1",
"null-loader": "0.1.1",
"offline-plugin": "3.4.2",
"plop": "1.5.0",
"postcss-advanced-variables": "^1.2.2",
"postcss-cssnext": "2.7.0",
"postcss-focus": "1.0.0",
"postcss-import": "^8.1.2",
"postcss-loader": "0.9.1",
"postcss-reporter": "1.4.1",
"postcss-simple-vars": "^3.0.0",
"pre-commit": "1.1.3",
"psi": "2.0.4",
"rimraf": "2.5.3",
"shelljs": "0.7.0",
"sinon": "2.0.0-pre",
"style-loader": "0.13.1",
"stylelint": "6.9.0",
"stylelint-config-standard": "10.0.0",
"url-loader": "0.5.7",
"webpack": "2.1.0-beta.15",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.1"
}
const path = require('path');
const webpack = require('webpack');
module.exports = (options) => ({
entry: options.entry,
output: Object.assign({
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
loaders: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
loader: 'babel',
exclude: /node_modules/,
query: options.babelQuery,
},
{
// Transform our own .css files with PostCSS and CSS-modules
test: /\.s?css$/,
exclude: [
/node_modules/,
/global\.scss/,
],
loader: options.cssLoaders,
},
{
// Transform app/css/global.css
test: /global\.scss$/,
loader: 'style-loader!css-loader?importLoaders=1!postcss-loader',
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
loaders: [
'style-loader',
'css-loader',
],
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader',
'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
],
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.json$/,
loader: 'json-loader',
},
/* , {
test: /\.(mp4|webm)$/,
loader: 'url-loader?limit=10000',
}*/
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports?self.fetch!whatwg-fetch',
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.NamedModulesPlugin(),
]),
resolve: {
modules: [
'app',
'node_modules'
],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
});
// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
// PostCSS plugins
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');
const cssVariables = require('../../app/css/variables');
const postcssVariables = require('postcss-advanced-variables');
module.exports = require('./webpack.base.babel')({
// In production, we skip all hot-reloading stuff
entry: [
path.join(process.cwd(), 'app/app.js'),
],
// Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
// We use ExtractTextPlugin so we get a seperate CSS file instead
// of the CSS being in the JS and injected as a style tag
cssLoaders: ExtractTextPlugin.extract(
'style-loader',
'css-loader?modules&camelCase&importLoaders=1!postcss-loader'
),
// ADD decoractors # see http://stackoverflow.com/questions/33801311/webpack-babel-6-es6-decorators
babelQuery: {
plugins: ['transform-decorators-legacy'],
},
// In production, we minify our CSS with cssnano
postcssPlugins: [
postcssVariables({
variables: cssVariables,
}),
postcssFocus(),
cssnext({
browsers: [
'last 2 versions',
'IE > 10',
],
features: {
calc: {
mediaQueries: true,
},
},
}),
postcssReporter({
clearMessages: true,
}),
],
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
// OccurrenceOrderPlugin is needed for long-term caching to work properly.
// See http://mxs.is/googmv
new webpack.optimize.OccurrenceOrderPlugin(true),
// Merge all duplicate modules
new webpack.optimize.DedupePlugin(),
// Minify and optimize the JavaScript
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false, // ...but do not show warnings in the console (there is a lot of them)
},
}),
// Minify and optimize the index.html
new HtmlWebpackPlugin({
template: 'app/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
// Extract the CSS into a seperate file
new ExtractTextPlugin('[name].[contenthash].css'),
// Put it in the end to capture all the HtmlWebpackPlugin's
// assets manipulations and do leak its manipulations to HtmlWebpackPlugin
new OfflinePlugin({
relativePaths: false,
publicPath: '/',
// No need to cache .htaccess. See http://mxs.is/googmp,
// this is applied before any match in `caches` section
excludes: ['.htaccess'],
caches: {
main: [':rest:'],
// All chunks marked as `additional`, loaded after main section
// and do not prevent SW to install. Change to `optional` if
// do not want them to be preloaded at all (cached only when first loaded)
additional: ['*.chunk.js'],
},
// Removes warning for about `additional` section usage
safeToUseOptionalCaches: true,
AppCache: false,
}),
],
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment