Skip to content

Instantly share code, notes, and snippets.

@rbellamy
Created November 22, 2016 17:00
Show Gist options
  • Save rbellamy/8b1240787efe132ee6d786c62b157244 to your computer and use it in GitHub Desktop.
Save rbellamy/8b1240787efe132ee6d786c62b157244 to your computer and use it in GitHub Desktop.
webpack configuration
'use strict';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
exports.tslint = {
test: /\.ts$/,
loader: 'tslint',
exclude: [
/node_modules/,
/typings\/custom/
],
};
exports.istanbulInstrumenter = {
test: /^(.(?!\.test))*\.ts$/,
loader: 'istanbul-instrumenter-loader',
};
exports.ts = {
test: /\.ts$/,
loader: 'babel-loader!awesome-typescript-loader',
exclude: [
/node_modules/,
/typings\/custom/
],
};
exports.js = {
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
};
exports.html = {
test: /\.html$/,
loader: 'raw',
exclude: /node_modules/,
};
exports.scssprod = {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]!resolve-url!sass?config=sassLoader'),
exclude: /\.(eot|woff|woff2|ttf|svg)(\?[\s\S]+)?$/
};
exports.scssdev = {
test: /\.scss$/,
loader: 'style!css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]!resolve-url!sass?config=sassLoader',
exclude: /node_modules/,
};
exports.css = {
test: /\.s?(a|c)ss$/,
loader: 'style!css?-minimize&sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]!resolve-url',
exclude: /node_modules/,
};
exports.fonts = {
test: /\.(eot|woff|woff2|ttf|svg)(\?[\s\S]+)?$/,
loader: 'url-loader?limit=1000&name=fonts/[name].[ext]',
exclude: /node_modules/,
include: [path.resolve(__dirname, 'node_modules/mdi/fonts')]
};
'use strict';
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const SplitByPathPlugin = require('webpack-split-by-path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const sourceMap = process.env.TEST
? [new webpack.SourceMapDevToolPlugin({ filename: null, test: /\.ts$/ })]
: [ ];
const basePlugins = [
new webpack.DefinePlugin({
__DEV__: process.env.NODE_ENV !== 'production',
__PRODUCTION__: process.env.NODE_ENV === 'production',
__TEST__: JSON.stringify(process.env.TEST || false),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new HtmlWebpackPlugin({
chunksSortMode: 'dependency',
template: './src/index.html',
inject: 'body',
}),
new webpack.NoErrorsPlugin(),
new CopyWebpackPlugin([
{ from: 'src/img', to: 'img' },
{ from: 'src/partials', to: 'partials' },
{ from: './node_modules/lumX/dist/lumx.css', to: 'lumx.css' },
{ from: './node_modules/mdi/css/materialdesignicons.css', to: 'materialdesignicons.css' },
{ from: './node_modules/angular-material/angular-material.css', to: 'angular-material.css' },
{ from: './node_modules/angular-ranger/angular-ranger.css', to: 'angular-ranger.css' },
]),
new ForkCheckerPlugin(),
new ExtractTextPlugin(process.env.NODE_ENV === 'production' ?
'[name].chunk.[chunkhash].css' : '[name].css', {
allChunks: true
}),
].concat(sourceMap);
const devPlugins = [
new StyleLintPlugin({
configFile: './.stylelintrc',
files: ['src/**/*.s?(a|c)ss'],
failOnError: false,
}),
];
const prodPlugins = [
new SplitByPathPlugin([
{ name: 'vendor', path: [path.join(__dirname, '../', '/node_modules/')] },
]),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
];
module.exports = basePlugins
.concat(process.env.NODE_ENV === 'production' ? prodPlugins : [])
.concat(process.env.NODE_ENV === 'development' ? devPlugins : []);
'use strict';
const webpack = require('webpack');
const postcssBasePlugins = [
require('postcss-modules-local-by-default'),
require('postcss-import')({
addDependencyTo: webpack,
}),
require('postcss-cssnext'),
];
const postcssDevPlugins = [];
const postcssProdPlugins = [
require('cssnano')({
safe: true,
sourcemap: true,
autoprefixer: false,
}),
];
const postcssPlugins = postcssBasePlugins
.concat(process.env.NODE_ENV === 'production' ? postcssProdPlugins : [])
.concat(process.env.NODE_ENV === 'development' ? postcssDevPlugins : []);
module.exports = () => postcssPlugins;
'use strict';
const path = require('path');
const proxy = require('./server/webpack-dev-proxy');
const loaders = require('./webpack/loaders');
const plugins = require('./webpack/plugins');
const postcssInit = require('./webpack/postcss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bourbon = require('node-bourbon').includePaths;
module.exports = {
entry: { app: './src/app.ts' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: process.env.NODE_ENV === 'production' ?
'[name].[chunkhash].js' : '[name].js',
publicPath: '/',
sourceMapFilename: process.env.NODE_ENV === 'production' ?
'[name].[chunkhash].js.map' : '[name].js.map',
chunkFilename: process.env.NODE_ENV === 'production' ?
'[name].chunk.[chunkhash].js' : '[name].js',
},
devtool: process.env.NODE_ENV === 'production' ?
'source-map' :
'inline-source-map',
resolve: {
//modulesDirectories: ['node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.scss']
},
plugins: plugins,
//postcss: postcssInit,
devServer: {
contentBase: './src',
historyApiFallback: { index: '/' },
proxy: Object.assign({}, proxy(), { '/api/*': 'http://localhost:3000' }),
},
module: {
preLoaders: [
//loaders.tslint,
],
loaders: [
loaders.ts,
loaders.js,
loaders.html,
process.env.NODE_ENV === 'production' ? loaders.scssprod : loaders.scssdev,
loaders.fonts,
],
},
sassLoader: {
sourceMap: true,
includePaths: [bourbon, path.resolve(__dirname, 'node_modules/mdi/scss')],
excludePaths: [path.resolve(__dirname, 'node_modules')],
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment