diff --git a/config/webpack.common.js b/config/webpack.common.js index b6040c0..30af539 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -1,52 +1,107 @@ /** * Adapted from angular2-webpack-starter */ - -const helpers = require('./helpers'), - webpack = require('webpack'), - CleanWebpackPlugin = require('clean-webpack-plugin'); -// const stringify = require('json-stringify'); +const webpack = require('webpack'); +const helpers = require('./helpers'); +var path = require('path'); +var stringify = require('json-stringify'); /** * Webpack Plugins */ -// const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; -// const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; +const autoprefixer = require('autoprefixer'); +const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; +const CleanWebpackPlugin = require('clean-webpack-plugin'); +const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin'); // const CopyWebpackPlugin = require('copy-webpack-plugin'); const DefinePlugin = require('webpack/lib/DefinePlugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -// const HtmlElementsPlugin = require('./html-elements-plugin'); const IgnorePlugin = require('webpack/lib/IgnorePlugin'); const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); -// const ngcWebpack = require('ngc-webpack'); const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin'); const OptimizeJsPlugin = require('optimize-js-plugin'); const ProvidePlugin = require('webpack/lib/ProvidePlugin'); +const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); +const StyleLintPlugin = require('stylelint-webpack-plugin'); +// const TsConfigPathsPlugin = require('awesome-typescript-loader'); + +/* + * Webpack Constants + */ +const METADATA = { + baseUrl: '/', + isDevServer: helpers.isWebpackDevServer(), + FABRIC8_BRANDING: process.env.FABRIC8_BRANDING || 'fabric8' +}; +// ExtractTextPlugin +const extractCSS = new ExtractTextPlugin({ + filename: '[name].[id].css', + allChunks: true +}); + +/* + * Webpack configuration + * + * See: http://webpack.github.io/docs/configuration.html#cli + */ +module.exports = function (options) { + console.log('The options from the webpack config: ' + stringify(options, null, 2)); + + var config = { + /* + * Cache generated modules and chunks to improve performance for multiple incremental builds. + * This is enabled by default in watch mode. + * You can pass false to disable it. + * + * See: http://webpack.github.io/docs/configuration.html#cache + */ + //cache: false, + + /* + * The entry point for the bundle + * Our Angular.js app + * + * See: https://webpack.js.org/configuration/entry-context/#entry + */ + entry: helpers.root('index.ts'), -module.exports = { devtool: 'inline-source-map', + /* + * Options affecting the resolving of modules. + * + * See: https://webpack.js.org/configuration/resolve + */ resolve: { - extensions: ['.ts', '.js', '.json'] - }, - entry: helpers.root('index.ts'), - - // require those dependencies but don't bundle them - externals: [/^@angular\//, /^rxjs\//], + /** + * An array that automatically resolve certain extensions. + * Which is what enables users to leave off the extension when importing. + * + * See: https://webpack.js.org/configuration/resolve/#resolve-extensions + */ + extensions: ['.ts', '.js', '.json'], + }, + /* + * Options affecting the normal modules. + * + * See: http://webpack.github.io/docs/configuration.html#module + */ module: { rules: [ - // { - // enforce: 'pre', - // test: /\.ts$/, - // use: 'tslint-loader', - // exclude: [helpers.root('node_modules')] - // }, + + /* + * Typescript loader support for .ts and Angular 2 async routes via .async.ts + * Replace templateUrl and stylesUrl with require() + * + * See: https://github.com/s-panferov/awesome-typescript-loader + * See: https://github.com/TheLarkInn/angular2-template-loader + */ { test: /\.ts$/, use: [ @@ -60,38 +115,131 @@ module.exports = { loader: 'angular2-template-loader' } ], - exclude: [/\.spec\.ts$/] - }, - // copy those assets to output - { - test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - use: ['file-loader?name=fonts/[name].[hash].[ext]?'] + exclude: [/\.(spec|e2e)\.ts$/] }, - // Support for *.json files. + /* + * Json loader support for *.json files. + * + * See: https://github.com/webpack/json-loader + */ { test: /\.json$/, use: ['json-loader'] }, + /* HTML Linter + * Checks all files against .htmlhintrc + */ { - test: /\.css$/, - use: ['to-string-loader', 'css-loader'] - }, + enforce: 'pre', + test: /\.html$/, + loader: 'htmlhint-loader', + exclude: [/node_modules/], + options: { + configFile: './.htmlhintrc' + } + }, - { - test: /\.scss$/, - use: ["css-to-string-loader", "css-loader", "sass-loader"] - }, + /* Raw loader support for *.html + * Returns file content as string + * + * See: https://github.com/webpack/raw-loader + */ + { + test: /\.html$/, + use: ['html-loader'] + }, - // todo: change the loader to something that adds a hash to images - { - test: /\.html$/, - use: ['raw-loader'] + /* + * to string and css loader support for *.css files + * Returns file content as string + * + */ + { + test: /\.component\.css$/, + use: [ + { + loader: 'to-string-loader' + }, { + loader: 'css-loader', + options: { + minimize: true, + sourceMap: true, + context: '/' + } + } + ], + }, + + { + test: /\.css$/, + loader: extractCSS.extract({ + fallback: "style-loader", + use: "css-loader?sourceMap&context=/" + }) + }, { + test: /\.component\.less$/, + use: [ + { + loader: 'to-string-loader' + }, + { + loader: 'css-loader', + options: { + minimize: true, + sourceMap: true, + context: '/' + } + }, + { + loader: 'less-loader', + options: { + paths: [ + path.resolve(__dirname, "../node_modules/patternfly/src/less"), + path.resolve(__dirname, "../node_modules/patternfly/node_modules") + ], + sourceMap: true + } + }], + }, + + /** + * File loader for supporting fonts, for example, in CSS files. + */ + { + test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/, + use: [ + { + loader: 'url-loader', + query: { + limit: 3000, + name: 'assets/fonts/[name].[ext]' + } } ] }, + { + test: /\.jpg$|\.png$|\.svg$|\.gif$|\.jpeg$/, + use: [ + { + loader: 'url-loader', + query: { + limit: 3000, + name: 'assets/fonts/[name].[ext]' + } + } + ] + } + ] + }, + + /* + * Add additional plugins to the compiler. + * + * See: http://webpack.github.io/docs/configuration.html#plugins + */ plugins: [ /** * Plugin: ContextReplacementPlugin @@ -135,15 +283,7 @@ module.exports = { failOnHint: false }, - /** - * Sass - * Reference: https://github.com/jtangelder/sass-loader - * Transforms .scss files to .css - */ - sassLoader: { - //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")] - } - } + } }), // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin // Only emit files when there are no errors @@ -169,6 +309,36 @@ module.exports = { root: helpers.root(), verbose: false, dry: false + }), + extractCSS, + /* + * StyleLintPlugin + */ + new StyleLintPlugin({ + configFile: '.stylelintrc', + syntax: 'less', + context: 'src', + files: '**/*.less', + failOnError: true, + quiet: false, }) - ] + ], + + /** + * Include polyfills or mocks for various node stuff + * Description: Node configuration + * + * See: https://webpack.github.io/docs/configuration.html#node + */ + node: { + global: true, + crypto: 'empty', + process: true, + module: false, + clearImmediate: false, + setImmediate: false + } + }; + + return config; }; diff --git a/config/webpack.test.js b/config/webpack.test.js index c862f26..2a10b3e 100644 --- a/config/webpack.test.js +++ b/config/webpack.test.js @@ -87,15 +87,15 @@ module.exports = function (options) { * * See: https://github.com/webpack/source-map-loader */ - { - test: /\.js$/, - use: ['source-map-loader'], - exclude: [ - // these packages have problems with their sourcemaps - helpers.root('node_modules/rxjs'), - helpers.root('node_modules/@angular') - ] - }, + // { + // test: /\.js$/, + // use: ['source-map-loader'], + // exclude: [ + // // these packages have problems with their sourcemaps + // helpers.root('node_modules/rxjs'), + // helpers.root('node_modules/@angular') + // ] + // }, /** * Typescript loader support for .ts and Angular 2 async routes via .async.ts diff --git a/tsconfig-test.json b/tsconfig-test.json index 04d94e1..c782c15 100644 --- a/tsconfig-test.json +++ b/tsconfig-test.json @@ -9,8 +9,8 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, - "sourceMap": false, - "inlineSources": false, + "sourceMap": true, + "inlineSources": true, "noEmitHelpers": false, // Planner and demo won't run when true "strictNullChecks": false, "noImplicitAny": true,