I'm having trouble getting flex-layout to work as part of my build with webpack, could fast start instructions please be added.
{
"name": "pricing-manager",
"version": "0.0.1",
"scripts": {
"start": "webpack-dev-server --progress --inline"
},
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/material": "^2.0.0-alpha.9-experimental-pizza",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"@types/core-js": "^0.9.35",
"@types/hammerjs": "^2.0.33",
"@types/jquery": "^2.0.34",
"@types/node": "^6.0.52",
"angular2-template-loader": "^0.4.0",
"animate.css": "^3.5.2",
"awesome-typescript-loader": "^2.2.4",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"core-js": "^2.4.1",
"css-loader": "^0.23.1",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"font-awesome": "^4.7.0",
"font-awesome-loader": "^1.0.1",
"hammerjs": "^2.0.8",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.24.1",
"imports-loader": "^0.6.5",
"jquery": "^3.1.1",
"json-loader": "^0.5.4",
"node-sass": "^3.13.1",
"node-waves": "^0.7.5",
"raw-loader": "^0.5.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"typescript": "2.1.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"zone.js": "^0.7.2"
}
}
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
// Use the same directory as this file to path to our entry chunks.
context: process.cwd(),
// Our entry chunks, with the last being the app start point.
entry: {
polyfills: './src/polyfills.ts',
libs: './src/libs.ts',
app: './src/main.ts'
},
output: {
path: __dirname + '/dist',
publicPath: 'http://localhost:8080/',
filename: '[name].bundle.js',
sourceMapFilename: '[name].bundle.map',
chunkFilename: '[name].chunk.js'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
exclude: /node_modules/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.ts$/,
include: /node_modules/,
loader: 'awesome-typescript-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /global\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.scss$/,
exclude: /node_modules|global\.scss$/,
loaders: ['raw-loader', 'sass-loader']
},
{
test: require.resolve("jquery"),
loader: "expose-loader?$!expose-loader?jQuery"
},
{
test: require.resolve("node-waves"),
loader: "expose-loader?Waves"
},
{
test: /\.json$/,
loader: "json-loader"
}
]
},
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
"window.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin({
children: true
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
devtool: 'cheap-module-eval-source-map',
devServer: {
historyApiFallback: true,
stats: {
version: true,
errorDetails: false,
colors: false,
modules: false,
reasons: false,
chunks: true,
chunkModules: false,
assets: true
},
inline: true,
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:56074',
secure: false
}
}
}
};