From 3e3966f546c8a74560b73ac1e3fb76e0fa29fd38 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 11 Nov 2016 21:46:08 +0100 Subject: [PATCH] Migration to webpack 2 --- src/Squidex/app-config/karma.coverage.conf.js | 2 +- src/Squidex/app-config/webpack.common.js | 133 ------------------ src/Squidex/app-config/webpack.coverage.js | 23 --- src/Squidex/app-config/webpack.run.base.js | 45 ++++++ .../{webpack.dev.js => webpack.run.dev.js} | 4 +- .../{webpack.prod.js => webpack.run.prod.js} | 11 +- .../app-config/webpack.test.coverage.js | 26 ++++ src/Squidex/app/app.module.ts | 2 +- src/Squidex/package.json | 2 +- src/Squidex/webpack.config.js | 2 +- 10 files changed, 79 insertions(+), 171 deletions(-) delete mode 100644 src/Squidex/app-config/webpack.common.js delete mode 100644 src/Squidex/app-config/webpack.coverage.js create mode 100644 src/Squidex/app-config/webpack.run.base.js rename src/Squidex/app-config/{webpack.dev.js => webpack.run.dev.js} (93%) rename src/Squidex/app-config/{webpack.prod.js => webpack.run.prod.js} (88%) create mode 100644 src/Squidex/app-config/webpack.test.coverage.js diff --git a/src/Squidex/app-config/karma.coverage.conf.js b/src/Squidex/app-config/karma.coverage.conf.js index f0720ed25..29ae72b39 100644 --- a/src/Squidex/app-config/karma.coverage.conf.js +++ b/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 = { diff --git a/src/Squidex/app-config/webpack.common.js b/src/Squidex/app-config/webpack.common.js deleted file mode 100644 index 61960064b..000000000 --- a/src/Squidex/app-config/webpack.common.js +++ /dev/null @@ -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' - }) - ] -}; \ No newline at end of file diff --git a/src/Squidex/app-config/webpack.coverage.js b/src/Squidex/app-config/webpack.coverage.js deleted file mode 100644 index 8def31ccb..000000000 --- a/src/Squidex/app-config/webpack.coverage.js +++ /dev/null @@ -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') - } - ] - } -}); \ No newline at end of file diff --git a/src/Squidex/app-config/webpack.run.base.js b/src/Squidex/app-config/webpack.run.base.js new file mode 100644 index 000000000..5692775fa --- /dev/null +++ b/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' + }) + ] +}); \ No newline at end of file diff --git a/src/Squidex/app-config/webpack.dev.js b/src/Squidex/app-config/webpack.run.dev.js similarity index 93% rename from src/Squidex/app-config/webpack.dev.js rename to src/Squidex/app-config/webpack.run.dev.js index d23624bad..370840172 100644 --- a/src/Squidex/app-config/webpack.dev.js +++ b/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 * diff --git a/src/Squidex/app-config/webpack.prod.js b/src/Squidex/app-config/webpack.run.prod.js similarity index 88% rename from src/Squidex/app-config/webpack.prod.js rename to src/Squidex/app-config/webpack.run.prod.js index a65577feb..825ee7f30 100644 --- a/src/Squidex/app-config/webpack.prod.js +++ b/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) { diff --git a/src/Squidex/app-config/webpack.test.coverage.js b/src/Squidex/app-config/webpack.test.coverage.js new file mode 100644 index 000000000..e7e2d4de5 --- /dev/null +++ b/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)); \ No newline at end of file diff --git a/src/Squidex/app/app.module.ts b/src/Squidex/app/app.module.ts index bb43c31cc..d05adbf9a 100644 --- a/src/Squidex/app/app.module.ts +++ b/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: [ diff --git a/src/Squidex/package.json b/src/Squidex/package.json index 0df2bb5b2..8976930e6 100644 --- a/src/Squidex/package.json +++ b/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" }, diff --git a/src/Squidex/webpack.config.js b/src/Squidex/webpack.config.js index e91c6eba7..fcfe1252f 100644 --- a/src/Squidex/webpack.config.js +++ b/src/Squidex/webpack.config.js @@ -1 +1 @@ -module.exports = require('./app-config/webpack.dev.js'); \ No newline at end of file +module.exports = require('./app-config/webpack.run.dev.js'); \ No newline at end of file