Migration to webpack 2

src/Squidex/app-config/karma.coverage.conf.js

@@ -1,4 +1,4 @@
-var webpackConfig = require('./webpack.coverage');
+var webpackConfig = require('./webpack.test.coverage');
 
 module.exports = function (config) {
     var _config = {

src/Squidex/app-config/webpack.common.js

@@ -1,133 +0,0 @@
-// ReSharper disable InconsistentNaming
-// ReSharper disable PossiblyUnassignedProperty
-
-        var webpack = require('webpack'),
-               path = require('path'),
-  HtmlWebpackPlugin = require('html-webpack-plugin'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin'),
-            helpers = require('./helpers');
-
-module.exports = {
-    /**
-     * The entry point for the bundle
-     * Our Angular.js app
-     *
-     * See: http://webpack.github.io/docs/configuration.html#entry
-     */
-    entry: {
-        'polyfills': './app/polyfills.ts',
-           'vendor': './app/vendor.ts',
-              'app': './app/main.ts'
-    },
-
-    /**
-     * Options affecting the resolving of modules.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#resolve
-     */
-    resolve: {
-        /**
-         * An array of extensions that should be used to resolve modules.
-         *
-         * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
-         */
-        extensions: ['.js', '.ts', '.css', '.scss'],
-        modules: [
-            helpers.root('app'),
-            helpers.root('app', 'theme'),
-            helpers.root('app-libs'),
-            helpers.root('node_modules')
-        ],
-    },
-
-    /*
-     * Options affecting the normal modules.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#module
-     */
-    module: {
-        /**
-         * An array of automatically applied loaders.
-         *
-         * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
-         * This means they are not resolved relative to the configuration file.
-         *
-         * See: http://webpack.github.io/docs/configuration.html#module-loaders
-         */
-        loaders: [
-            {
-                test: /\.ts$/,
-                loaders: ['awesome-typescript', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles', 'tslint']
-            }, {
-                test: /\.html$/,
-                loader: 'html'
-            }, {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/,
-                loader: 'file?name=assets/[name].[hash].[ext]'
-            }, {
-                test: /\.css$/,
-                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style', loader: 'css?sourceMap' })
-            }, {
-                test: /\.scss$/,
-                exclude: helpers.root('app', 'theme'),
-                loaders: ['raw', 'sass']
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.LoaderOptionsPlugin({
-            options: {
-                tslint: {
-                    /**
-                    * Run tslint in production build and fail if there is one warning.
-                    * 
-                    * See: https://github.com/wbuchwalter/tslint-loader
-                    */
-                    emitErrors: false,
-                    /**
-                    * Share the configuration file with the IDE
-                    */
-                    configuration: require('./../tslint.json')
-                },
-                sassLoader: {
-                    includePaths: [helpers.root('app', 'theme')]
-                },
-                context: '/'
-            }
-        }),
-
-        /**
-         * Shares common code between the pages.
-         * It identifies common modules and put them into a commons chunk.
-         *
-         * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
-         */
-        new webpack.optimize.CommonsChunkPlugin({
-            name: ['app', 'vendor', 'polyfills']
-        }),
-
-        /**
-         * Simplifies creation of HTML files to serve your webpack bundles.
-         * This is especially useful for webpack bundles that include a hash in the filename
-         * which changes every compilation.
-         *
-         * See: https://github.com/ampedandwired/html-webpack-plugin
-         */
-        new HtmlWebpackPlugin({
-            template: 'wwwroot/index.html'
-        }),
-
-        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
-
-        /**
-         * Shim additional libraries
-         * 
-         * See: https://webpack.github.io/docs/shimming-modules.html
-         */
-        new webpack.ProvidePlugin({
-            // Mouse trap handles shortcut management
-            'Mousetrap': 'mousetrap/mousetrap'
-        })
-    ]
-};

src/Squidex/app-config/webpack.coverage.js

@@ -1,23 +0,0 @@
-
-var webpackMerge = require('webpack-merge'),
-            path = require('path'),
-         helpers = require('./helpers'),
-      testConfig = require('./webpack.test.js');
-
-module.exports = webpackMerge(testConfig, {
-    module: {
-        loaders: [
-            {
-                test: /\.(js|ts)$/, 
-                include: helpers.root('app'),
-                exclude: [/\.(e2e|spec)\.ts$/],
-                loader: 'istanbul-instrumenter-loader'
-            }, {
-                test: /\.(js|ts)$/,
-                include: helpers.root('app'),
-                exclude: [/\.(e2e|spec)\.ts$/],
-                loader: helpers.root('app-config', 'fix-coverage-loader')
-            }
-        ]
-    }
-});

src/Squidex/app-config/webpack.run.base.js

@@ -0,0 +1,45 @@
+// ReSharper disable InconsistentNaming
+// ReSharper disable PossiblyUnassignedProperty
+
+      var webpack = require('webpack'),
+     webpackMerge = require('webpack-merge'),
+HtmlWebpackPlugin = require('html-webpack-plugin'),
+     commonConfig = require('./webpack.config.js'),
+          helpers = require('./helpers');
+
+module.exports = webpackMerge(commonConfig, {
+    /**
+     * The entry point for the bundle
+     * Our Angular.js app
+     *
+     * See: http://webpack.github.io/docs/configuration.html#entry
+     */
+    entry: {
+        'polyfills': './app/polyfills.ts',
+           'vendor': './app/vendor.ts',
+              'app': './app/main.ts'
+    },
+
+    plugins: [
+        /**
+         * Shares common code between the pages.
+         * It identifies common modules and put them into a commons chunk.
+         *
+         * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+         */
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['app', 'vendor', 'polyfills']
+        }),
+
+        /**
+         * Simplifies creation of HTML files to serve your webpack bundles.
+         * This is especially useful for webpack bundles that include a hash in the filename
+         * which changes every compilation.
+         *
+         * See: https://github.com/ampedandwired/html-webpack-plugin
+         */
+        new HtmlWebpackPlugin({
+            template: 'wwwroot/index.html'
+        })
+    ]
+});

src/Squidex/app-config/webpack.dev.js → src/Squidex/app-config/webpack.run.dev.js

@@ -3,10 +3,10 @@
 
      var webpackMerge = require('webpack-merge'),
     ExtractTextPlugin = require('extract-text-webpack-plugin'),
-         commonConfig = require('./webpack.common.js'),
+            runConfig = require('./webpack.run.base.js'),
               helpers = require('./helpers');
 
-module.exports = webpackMerge(commonConfig, {
+module.exports = webpackMerge(runConfig, {
     /**
      * Developer tool to enhance debugging
      *

src/Squidex/app-config/webpack.prod.js → src/Squidex/app-config/webpack.run.prod.js

@@ -1,14 +1,14 @@
       var webpack = require('webpack'),
      webpackMerge = require('webpack-merge'),
 ExtractTextPlugin = require('extract-text-webpack-plugin'),
-     commonConfig = require('./webpack.common.js'),
+        runConfig = require('./webpack.run.base.js'),
           helpers = require('./helpers');
 
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 commonConfig.plugins[0].options.options.tslint.emitErrors = true;
 
-module.exports = webpackMerge(commonConfig, {
+module.exports = webpackMerge(runConfig, {
     devtool: 'source-map',
 
     output: {
@@ -71,13 +71,6 @@ module.exports = webpackMerge(commonConfig, {
             } 
         }),
 
-        /*
-         * Puts each bundle into a file and appends the hash of the file to the path.
-         * 
-         * See: https://github.com/webpack/extract-text-webpack-plugin
-         */
-        new ExtractTextPlugin('[name].[hash].css'),
-
         function () {
             this.plugin('done', function (stats) {
                 if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1) {

src/Squidex/app-config/webpack.test.coverage.js

@@ -0,0 +1,26 @@
+
+var webpackMerge = require('webpack-merge'),
+            path = require('path'),
+         helpers = require('./helpers'),
+      testConfig = require('./webpack.test.js');
+
+testConfig.module.loaders.shift();
+
+module.exports = webpackMerge(testConfig, {
+    module: {
+        loaders: [
+            {
+                test: /\.ts$/,
+                include: [/\.(e2e|spec)\.ts$/],
+                loaders: ['awesome-typescript']
+            },
+            {
+                test: /\.ts$/,
+                exclude: [/\.(e2e|spec)\.ts$/],
+                loaders: ['istanbul-instrumenter-loader', helpers.root('app-config', 'fix-coverage-loader'), 'awesome-typescript', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles']
+            }
+        ]
+    }
+});
+
+console.log(JSON.stringify(module.exports, null, 4));

src/Squidex/app/app.module.ts

@@ -36,7 +36,7 @@ import {
 
 import { routing } from './app.routes';
 
-const baseUrl = window.location.protocol + '//' + window.location.host + '/';;;
+const baseUrl = window.location.protocol + '//' + window.location.host + '/';
 
 @Ng2.NgModule({
     imports: [

src/Squidex/package.json

@@ -9,7 +9,7 @@
     "test:coverage": "karma start karma.coverage.conf.js",
     "test:clean": "rimraf _test-output",
     "dev": "cpx node_modules/oidc-client/dist/oidc-client.min.js wwwroot/scripts/ & webpack-dev-server --inline --hot --port 3000",
-    "build": "webpack --config app-config/webpack.prod.js --bail",
+    "build": "webpack --config app-config/webpack.run.prod.js --bail",
     "build:copy": "cpx node_modules/oidc-client/dist/oidc-client.min.js wwwroot/scripts/",
     "build:clean": "rimraf wwwroot/build"
   },

src/Squidex/webpack.config.js

@@ -1 +1 @@
-module.exports = require('./app-config/webpack.dev.js');
+module.exports = require('./app-config/webpack.run.dev.js');