-
-
Save TheLarkInn/954f866378d16229846beecb4da1a070 to your computer and use it in GitHub Desktop.
This is the current attempt at implementing the TsConfigPathsPlugin as described.
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
// 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