build(webpack): Changes to improve the build process in webpack. WIP

Author: trimox

config/webpack/webpack.config.umd.js

@@ -2,108 +2,113 @@ const webpack = require('webpack');
 var util = require('./util');
 
 module.exports = {
- entry: './src/lib/index.ts',
- output: {
-  path: util.root('dist/bundle'),
-  filename: 'core.js',
-  libraryTarget: 'umd',
-  library: 'angularMDCWeb'
- },
- resolve: {
-  extensions: ['.ts', '.js']
- },
- externals: {
-  '@angular/core': {
-   root: ['ng', 'core'],
-   commonjs: '@angular/core',
-   commonjs2: '@angular/core',
-   amd: '@angular/core'
+  entry: './src/lib/index.ts',
+  output: {
+    path: util.root('dist/bundle'),
+    filename: 'core.js',
+    libraryTarget: 'umd',
+    library: 'angularMDCWeb'
   },
-  '@angular/common': {
-   root: ['ng', 'common'],
-   commonjs: '@angular/common',
-   commonjs2: '@angular/common',
-   amd: '@angular/common'
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js']
   },
-  '@angular/forms': {
-   root: ['ng', 'forms'],
-   commonjs: '@angular/forms',
-   commonjs2: '@angular/forms',
-   amd: '@angular/forms'
-  },
-  '@angular/platform-browser': {
-   root: ['ng', 'platformBrowser'],
-   commonjs: '@angular/platform-browser',
-   commonjs2: '@angular/platform-browser',
-   amd: '@angular/platform-browser'
-  },
-  '@angular/platform-browser-dynamic': {
-   root: ['ng', 'platformBrowserDynamic'],
-   commonjs: '@angular/platform-browser-dynamic',
-   commonjs2: '@angular/platform-browser-dynamic',
-   amd: '@angular/platform-browser-dynamic'
-  },
-  'rxjs/Subject': {
-   root: ['rx', 'Subject'],
-   commonjs: 'rxjs/Subject',
-   commonjs2: 'rxjs/Subject',
-   amd: 'rxjs/Subject'
-  },
-  'rxjs/Observable': {
-   root: ['rx', 'Observable'],
-   commonjs: 'rxjs/Observable',
-   commonjs2: 'rxjs/Observable',
-   amd: 'rxjs/Observable'
-  },
-  'rxjs/BehaviorSubject': {
-   root: ['rx', 'BehaviorSubject'],
-   commonjs: 'rxjs/BehaviorSubject',
-   commonjs2: 'rxjs/BehaviorSubject',
-   amd: 'rxjs/BehaviorSubject'
-  },
-  'material-components-web': {
-   root: ['mdc', 'material-components-web'],
-   commonjs: 'material-components-web',
-   commonjs2: 'material-components-web',
-   amd: 'material-components-web'
-  }
- },
- module: {
-  rules: [{
-   test: /\.ts$/,
-   use: [{
-    loader: 'babel-loader'
-   }, {
-    loader: 'awesome-typescript-loader',
-    options: {
-     configFileName: './src/lib/tsconfig.json'
+  externals: {
+    '@angular/core': {
+      root: ['ng', 'core'],
+      commonjs: '@angular/core',
+      commonjs2: '@angular/core',
+      amd: '@angular/core'
+    },
+    '@angular/common': {
+      root: ['ng', 'common'],
+      commonjs: '@angular/common',
+      commonjs2: '@angular/common',
+      amd: '@angular/common'
+    },
+    '@angular/forms': {
+      root: ['ng', 'forms'],
+      commonjs: '@angular/forms',
+      commonjs2: '@angular/forms',
+      amd: '@angular/forms'
+    },
+    '@angular/platform-browser': {
+      root: ['ng', 'platformBrowser'],
+      commonjs: '@angular/platform-browser',
+      commonjs2: '@angular/platform-browser',
+      amd: '@angular/platform-browser'
+    },
+    '@angular/platform-browser-dynamic': {
+      root: ['ng', 'platformBrowserDynamic'],
+      commonjs: '@angular/platform-browser-dynamic',
+      commonjs2: '@angular/platform-browser-dynamic',
+      amd: '@angular/platform-browser-dynamic'
+    },
+    'rxjs/Subject': {
+      root: ['rx', 'Subject'],
+      commonjs: 'rxjs/Subject',
+      commonjs2: 'rxjs/Subject',
+      amd: 'rxjs/Subject'
+    },
+    'rxjs/Observable': {
+      root: ['rx', 'Observable'],
+      commonjs: 'rxjs/Observable',
+      commonjs2: 'rxjs/Observable',
+      amd: 'rxjs/Observable'
+    },
+    'rxjs/BehaviorSubject': {
+      root: ['rx', 'BehaviorSubject'],
+      commonjs: 'rxjs/BehaviorSubject',
+      commonjs2: 'rxjs/BehaviorSubject',
+      amd: 'rxjs/BehaviorSubject'
+    },
+    'material-components-web': {
+      root: ['mdc', 'material-components-web'],
+      commonjs: 'material-components-web',
+      commonjs2: 'material-components-web',
+      amd: 'material-components-web'
     }
-   }, {
-    loader: 'angular2-template-loader'
-   }],
-   exclude: [/\.(spec|e2e)\.ts$/]
-  }, {
-   test: /\.html$/,
-   loader: 'html-loader'
-  }, {
-   test: /\.(sass|scss)$/,
-   use: [
-    'style-loader',
-    'css-loader', {
-     loader: 'sass-loader',
-     options: {
-      includePaths: [
-       'node_modules'
+  },
+  module: {
+    rules: [{
+      test: /\.ts$/,
+      use: [{
+        loader: 'babel-loader?presets[]=es2015'
+      }, {
+        loader: 'awesome-typescript-loader',
+        options: {
+          configFileName: './src/lib/tsconfig.json'
+        }
+      }, {
+        loader: 'angular2-template-loader'
+      }],
+      exclude: [/\.(spec|e2e)\.ts$/]
+    }, {
+      test: /\.html$/,
+      loader: 'html-loader'
+    }, {
+      test: /\.(sass|scss)$/,
+      use: [
+        'style-loader',
+        'css-loader', {
+          loader: 'sass-loader',
+          options: {
+            includePaths: [
+              'node_modules'
+            ]
+          },
+        },
       ]
-     },
-    },
-   ]
-  }]
- },
- plugins: [
-  new webpack.SourceMapDevToolPlugin({
-   filename: 'core.js.map',
-   test: /\.js($|\?)/i
-  })
- ]
+    }]
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      minimize: true,
+      sourceMap: true,
+      include: /\.min\.js$/,
+    }),
+    new webpack.SourceMapDevToolPlugin({
+      filename: 'core.js.map',
+      test: /\.js($|\?)/i
+    })
+  ]
 };

config/webpack/webpack.dev.js

@@ -1,46 +1,82 @@
-const webpack = require('webpack');
+const webpack = require('webpack');
 const path = require('path');
+const glob = require('glob');
+const CopyPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const OUT_PATH = path.resolve('./publish');
 const MDC_DIR = path.resolve(__dirname, 'node_modules', '@material');
+var util = require('./util');
 
 const CSS_LOADER_CONFIG = [{
-  loader: 'css-loader',
-  options: {
-    sourceMap: true
-  }
+  loader: 'css-loader'
 }, {
   loader: 'postcss-loader',
   options: {
-    plugins: () => [require('autoprefixer')({ grid: false })]
+    plugins: () => [require('autoprefixer')({
+      grid: false
+    })]
   }
 }, {
   loader: 'sass-loader',
   options: {
-    sourceMap: true,
-    includePaths: path.join(__dirname, "sass")
+    includePaths: ['node_modules', 'node_modules/@material/*', 'sass']
   }
 }];
 
 module.exports = [{
-  devtool: 'source-map',
-  cache: true,
+  name: 'css',
+  entry: path.resolve('./src/demo-app/sass/main.scss'),
+  output: {
+    path: OUT_PATH,
+    // this output file is replaced below when ExtractTextPlugin generates final css.
+    filename: 'assets/style.min.css'
+  },
+  module: {
+    rules: [{
+      test: /\.scss$/,
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: CSS_LOADER_CONFIG
+      })
+    }]
+  },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    }),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: function() {
+          return [autoprefixer];
+        }
+      }
+    }),
+    new ExtractTextPlugin('assets/style.css')
+  ]
+}, {
+  devtool: false,
   output: {
     path: OUT_PATH,
     filename: '[name].bundle.js'
+      // filename: '[name].[chunkhash].bundle.js',
+      // sourceMapFilename: '[name].[chunkhash].bundle.js.map',
+      // chunkFilename: '[name].chunk.[chunkhash].js',
   },
   entry: {
     'polyfills': './src/demo-app/polyfills.ts',
     'vendor': './src/demo-app/vendor.ts',
     'app': './src/demo-app/root.module.ts'
   },
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.js', '.ts'],
+    modules: [util.root('src'), util.root('node_modules')],
   },
   module: {
     rules: [{
       test: /\.ts$/,
       use: [{
-        loader: 'babel-loader'
+        loader: 'babel-loader?presets[]=es2015',
       }, {
         loader: 'awesome-typescript-loader',
         options: {
@@ -51,38 +87,46 @@ module.exports = [{
       }],
       exclude: [/\.(spec|e2e)\.ts$/]
     }, {
-      test: /\.js$/,
-      loader: 'babel-loader',
-      include: [
-        MDC_DIR
+      "enforce": "pre",
+      "test": /\.(js|jsx)$/,
+      "use": [{
+        "loader": 'babel-loader',
+        "options": {
+          "presets": ['es2015'],
+        },
+      }, ],
+      "exclude": [
+        /\/node_modules\//
       ]
     }, {
       test: /\.html$/,
-      loader: 'html-loader'
+      loader: 'html-loader',
     }, {
       test: /\.(sass|scss)$/,
       use: [
         'style-loader',
         'css-loader', {
           loader: 'sass-loader',
           options: {
-            includePaths: [
-              'node_modules'
-            ]
-          },
+            includePaths: ['node_modules', "node_modules/@material/*"]
+          }
         },
       ]
     }]
   },
   plugins: [
-    // Workaround for angular/angular#11580
+    new webpack.LoaderOptionsPlugin({
+      //minimize: true, do not minimize for any loader - this will result in weird, unpredictable behavior
+      debug: false
+    }),
+    // Workaround for angular/angular#1158
     new webpack.ContextReplacementPlugin(
       /angular(\\|\/)core(\\|\/)@angular/,
-      path.resolve(__dirname, './ts')
+      path.resolve(__dirname, './src')
     ),
     new webpack.optimize.CommonsChunkPlugin({
       name: ['app', 'vendor', 'polyfills'],
       minChunks: Infinity
-    })
+    }),
   ]
 }];