Skip to content

Instantly share code, notes, and snippets.

@TheLarkInn
Created June 25, 2016 18:57
Show Gist options
  • Save TheLarkInn/954f866378d16229846beecb4da1a070 to your computer and use it in GitHub Desktop.
Save TheLarkInn/954f866378d16229846beecb4da1a070 to your computer and use it in GitHub Desktop.
This is the current attempt at implementing the TsConfigPathsPlugin as described.
// Angular Material2 Custom CLI Webpack Plugin: This allows for the following:
// To build, serve, and watchmode the angular2-material repo.
//
// Requirements:
//
// Do a find and replace on the src directory
// .css'] => .scss']
// This allows for angular2-template-loader to transpile the sass correctly.
import * as webpack from 'webpack';
import {ngAppResolve} from './webpack-build-utils';
const path = require('path');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DebugWebpackPlugin = require('debug-webpack-plugin');
var components = [
'button',
'card',
'checkbox',
'grid-list',
'icon',
'input',
'list',
'progress-bar',
'progress-circle',
'radio',
'sidenav',
'slide-toggle',
'button-toggle',
'tabs',
'toolbar'
];
/** Map relative paths to URLs. */
var aliasMap: any = {
'@angular2-material/core': ngAppResolve('./src/core'),
};
components.forEach(function (name) {
aliasMap[("@angular2-material/" + name)] = ngAppResolve("./src/components/" + name);
return aliasMap[("@angular2-material/" + name)] = ngAppResolve("./src/components/" + name);
});
export const webpackMaterialConfig = {
devtool: 'inline-source-map',
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css', '.scss'],
root: ngAppResolve('./'),
// alias: aliasMap,
plugins: [
new TsConfigPathsPlugin()
]
},
sassLoader: {
includePaths: [
// This allows for automatic resolving of @import's for sass for variables.
ngAppResolve('./src/core/style')
]
},
debug: true,
context: path.resolve(__dirname, './'),
entry: {
main: [ngAppResolve('./src/demo-app/main.ts')],
vendor: ngAppResolve('./src/demo-app/vendor.ts')
},
output: {
path: './dist',
filename: '[name].bundle.js'
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
ngAppResolve('node_modules/rxjs'),
ngAppResolve('node_modules/@angular'),
]
}
],
// ts: {
// configFileName: ngAppResolve('./src/demo-app/tsconfig.json')
// },
loaders: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
query: {
useWebpackText: true,
tsconfig: ngAppResolve('./src/demo-app/tsconfig.json'),
// resolveGlobs: false,
module: "es2015",
target: "es5",
lib: ['es6', 'dom'],
useForkChecker: true
}
},
{
loader: 'angular2-template-loader'
}
],
exclude: [/\.(spec|e2e)\.ts$/]
},
// {
// test: /\.ts$/,
// loaders: [
// 'ts-loader', 'angular2-template-loader'
// ],
// exclude: [/\.(spec|e2e)\.ts$/]
// },
{ test: /\.json$/, loader: 'json-loader'},
{ test: /\.css$/, loaders: ['raw-loader', 'postcss-loader'] },
{ test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
{ test: /\.less$/, loaders: ['raw-loader', 'less-loader'] },
{ test: /\.s?css$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
{ test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'},
{ test: /\.html$/, loader: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
new ForkCheckerPlugin(),
new HtmlWebpackPlugin({
template: ngAppResolve('./src/demo-app/index.html'),
chunksSortMode: 'dependency'
}),
],
node: {
global: 'window',
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment