Skip to content

Instantly share code, notes, and snippets.

@mindpivot
Last active October 19, 2017 15:20
Show Gist options
  • Save mindpivot/6ed230c5865972154af5a55872bf4976 to your computer and use it in GitHub Desktop.
Save mindpivot/6ed230c5865972154af5a55872bf4976 to your computer and use it in GitHub Desktop.
Config where DashboardPlugin does not work
{
"name": "rev.engine",
"version": "2.0.0",
"description": "Rev engine",
"scripts": {
"test": "jest --coverage",
"validate": "npm run flow; npm run test",
"dev": "webpack-dashboard -- webpack --env.env=development --config ./webpack.dev.js --progress --profile --colors --display-error-details",
"build": "webpack --env.env=production --config ./webpack.prod.js --progress --profile --colors --display-error-details",
"flow": "flow --show-all-errors; test $? -eq 0 -o $? -eq 2",
"start": "webpack-dashboard -- webpack-dev-server --env.env=development --config ./webpack.dev.js --open"
},
"author": "Inc.",
"license": "ISC",
"dependencies": {
"hammerjs": "^2.0.8",
"handlebars": "^4.0.11",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"rating": "^0.1.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^7.1.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"styled-components": "^2.2.1",
"velocity-animate": "^1.5.0",
"velocity-ui-pack": "^1.2.2",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"flow-bin": "^0.57.3",
"flow-typed": "^2.2.0",
"handlebars-loader": "^1.6.0",
"html-webpack-plugin": "^2.30.1",
"jest-cli": "^21.2.1",
"jest-css-modules": "^1.1.0",
"jsdom": "^11.3.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dashboard": "^1.0.0",
"webpack-dev-server": "^2.9.2",
"webpack-merge": "^4.1.0",
"webpack-notifier": "^1.5.0"
},
"jest": {
"testEnvironment": "jsdom",
"verbose": true,
"transform": {
".*": "<rootDir>/node_modules/jest-css-modules"
},
"collectCoverageFrom": [
"src/scripts/*.js",
"src/scripts/**/*.js"
],
"coverageThreshold": {
"global": {
"branches": 1,
"functions": 1,
"lines": 1,
"statements": 1
}
}
}
}
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
const ROOT = __dirname;
const NODE_DIR = path.join(ROOT, 'node_modules');
const MODULES_DIR = path.join(ROOT, 'src');
const WebpackNotifierPlugin = require('webpack-notifier');
module.exports = function (options) {
let ENV = options.env;
const cssFilename = ENV === "production" ? '[name].min.css' : '[name].css';
let extractSass = new ExtractTextPlugin({
filename: cssFilename,
//disable: process.env.NODE_ENV === "development"
});
const jsFilename = ENV === 'production' ? '[name].min.js' : '[name].js';
return {
target: 'web',
context: ROOT,
entry: {
"engine-new": path.join(MODULES_DIR, 'scripts/engine-init.js'),
//"engine": path.join(MODULES_DIR, 'scripts/modules/engine.js')
},
recordsPath: path.join(ROOT, 'webpack.records.json'),
stats: 'normal',
output: {
path: path.join(ROOT, 'build/engine-plugin'),
filename: jsFilename,
publicPath: '/build/',
sourceMapFilename: '[name].map',
chunkFilename: jsFilename,
hashDigest: 'hex',
hashDigestLength: 30
},
resolve: {
// alias: {
// 'handlebars': 'handlebars/dist/handlebars.min.js'
// },
extensions: ['.js', 'jsx', '.json', 'css'],
modules: [
MODULES_DIR,
'node_modules'
]
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
babelrc: false,
presets: [
"es2015",
"react"//["es2015", {"loose": true, "modules": false}]
],
plugins: [
"syntax-dynamic-import",
"syntax-async-functions",
"transform-class-properties",
"transform-object-rest-spread",
"transform-flow-strip-types"
]
}
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader",
options: {
minimize: ENV === "production"
}
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
}),
}
]
},
plugins: [
new DashboardPlugin(),
new WebpackNotifierPlugin({
title: 'ENGINE',
alwaysNotify: true,
contentImage: path.join(__dirname, 'engine.png')
}),
extractSass
]
}
};
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const commonConfig = require('./webpack.config');
const ROOT = __dirname;
const NODE_DIR = path.join(ROOT, 'node_modules');
const MODULES_DIR = path.join(ROOT, 'src');
module.exports = function(options) {
return webpackMerge(commonConfig(options), {
devtool: 'eval-source-map',
output: {
publicPath: '/'
},
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true
}),
new HtmlWebpackPlugin({
title: 'Engine Tester',
template: 'index-test.hbs'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
//new ExtractTextPlugin('engine.css'),
],
devServer: {
contentBase: path.join(__dirname),
compress: true,
quiet: true, // needed config value initially missing
port: 9000
}
});
};
@mindpivot
Copy link
Author

Updated to reflect a working configuration in case anyone stumbles across this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment