BVB Source Codes

angular-starter Show webpack.common.js Source code

Return Download angular-starter: download webpack.common.js Source code - Download angular-starter Source code - Type:.js
  1. /**
  2.  * @author: @AngularClass
  3.  */
  4.  
  5. const webpack = require('webpack');
  6. const helpers = require('./helpers');
  7.  
  8. /**
  9.  * Webpack Plugins
  10.  *
  11.  * problem with copy-webpack-plugin
  12.  */
  13. const AssetsPlugin = require('assets-webpack-plugin');
  14. const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
  15. const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
  16. const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
  17. const CopyWebpackPlugin = require('copy-webpack-plugin');
  18. const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
  19. const HtmlElementsPlugin = require('./html-elements-plugin');
  20. const HtmlWebpackPlugin = require('html-webpack-plugin');
  21. const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
  22. const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
  23. const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
  24. const ngcWebpack = require('ngc-webpack');
  25. //const PreloadWebpackPlugin = require('preload-webpack-plugin');
  26.  
  27. /**
  28.  * Webpack Constants
  29.  */
  30. const HMR = helpers.hasProcessFlag('hot');
  31. const AOT = process.env.BUILD_AOT || helpers.hasNpmFlag('aot');
  32. const METADATA = {
  33.   title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
  34.   baseUrl: '/',
  35.   isDevServer: helpers.isWebpackDevServer(),
  36.   HMR: HMR
  37. };
  38.  
  39. /**
  40.  * Webpack configuration
  41.  *
  42.  * See: http://webpack.github.io/docs/configuration.html#cli
  43.  */
  44. module.exports = function (options) {
  45.   isProd = options.env === 'production';
  46.   return {
  47.  
  48.     /**
  49.      * Cache generated modules and chunks to improve performance for multiple incremental builds.
  50.      * This is enabled by default in watch mode.
  51.      * You can pass false to disable it.
  52.      *
  53.      * See: http://webpack.github.io/docs/configuration.html#cache
  54.      */
  55.     //cache: false,
  56.  
  57.     /**
  58.      * The entry point for the bundle
  59.      * Our Angular.js app
  60.      *
  61.      * See: http://webpack.github.io/docs/configuration.html#entry
  62.      */
  63.     entry: {
  64.  
  65.       'polyfills': './src/polyfills.browser.ts',
  66.       'main':      AOT ? './src/main.browser.aot.ts' :
  67.                   './src/main.browser.ts'
  68.  
  69.     },
  70.  
  71.     /**
  72.      * Options affecting the resolving of modules.
  73.      *
  74.      * See: http://webpack.github.io/docs/configuration.html#resolve
  75.      */
  76.     resolve: {
  77.  
  78.       /**
  79.        * An array of extensions that should be used to resolve modules.
  80.        *
  81.        * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
  82.        */
  83.       extensions: ['.ts', '.js', '.json'],
  84.  
  85.       /**
  86.        * An array of directory names to be resolved to the current directory
  87.        */
  88.       modules: [helpers.root('src'), helpers.root('node_modules')],
  89.  
  90.     },
  91.  
  92.     /**
  93.      * Options affecting the normal modules.
  94.      *
  95.      * See: http://webpack.github.io/docs/configuration.html#module
  96.      */
  97.     module: {
  98.  
  99.       rules: [
  100.  
  101.         /**
  102.          * Typescript loader support for .ts
  103.          *
  104.          * Component Template/Style integration using `angular2-template-loader`
  105.          * Angular 2 lazy loading (async routes) via `ng-router-loader`
  106.          *
  107.          * `ng-router-loader` expects vanilla JavaScript code, not TypeScript code. This is why the
  108.          * order of the loader matter.
  109.          *
  110.          * See: https://github.com/s-panferov/awesome-typescript-loader
  111.          * See: https://github.com/TheLarkInn/angular2-template-loader
  112.          * See: https://github.com/shlomiassaf/ng-router-loader
  113.          */
  114.         {
  115.           test: /\.ts$/,
  116.           use: [
  117.             {
  118.               loader: '@angularclass/hmr-loader',
  119.               options: {
  120.                 pretty: !isProd,
  121.                 prod: isProd
  122.               }
  123.             },
  124.             {
  125.               /**
  126.                *  MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION OUTPUT.
  127.                */
  128.               loader: 'ng-router-loader',
  129.               options: {
  130.                 loader: 'async-import',
  131.                 genDir: 'compiled',
  132.                 aot: AOT
  133.               }
  134.             },
  135.             {
  136.               loader: 'awesome-typescript-loader',
  137.               options: {
  138.                 configFileName: 'tsconfig.webpack.json',
  139.                 useCache: !isProd
  140.               }
  141.             },
  142.             {
  143.               loader: 'angular2-template-loader'
  144.             }
  145.           ],
  146.           exclude: [/\.(spec|e2e)\.ts$/]
  147.         },
  148.  
  149.         /**
  150.          * Json loader support for *.json files.
  151.          *
  152.          * See: https://github.com/webpack/json-loader
  153.          */
  154.         {
  155.           test: /\.json$/,
  156.           use: 'json-loader'
  157.         },
  158.  
  159.         /**
  160.          * To string and css loader support for *.css files (from Angular components)
  161.          * Returns file content as string
  162.          *
  163.          */
  164.         {
  165.           test: /\.css$/,
  166.           use: ['to-string-loader', 'css-loader'],
  167.           exclude: [helpers.root('src', 'styles')]
  168.         },
  169.  
  170.         /**
  171.          * To string and sass loader support for *.scss files (from Angular components)
  172.          * Returns compiled css content as string
  173.          *
  174.          */
  175.         {
  176.           test: /\.scss$/,
  177.           use: ['to-string-loader', 'css-loader', 'sass-loader'],
  178.           exclude: [helpers.root('src', 'styles')]
  179.         },
  180.  
  181.         /**
  182.          * Raw loader support for *.html
  183.          * Returns file content as string
  184.          *
  185.          * See: https://github.com/webpack/raw-loader
  186.          */
  187.         {
  188.           test: /\.html$/,
  189.           use: 'raw-loader',
  190.           exclude: [helpers.root('src/index.html')]
  191.         },
  192.  
  193.         /**
  194.          * File loader for supporting images, for example, in CSS files.
  195.          */
  196.         {
  197.           test: /\.(jpg|png|gif)$/,
  198.           use: 'file-loader'
  199.         },
  200.  
  201.         /* File loader for supporting fonts, for example, in CSS files.
  202.         */
  203.         {
  204.           test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
  205.           use: 'file-loader'
  206.         }
  207.  
  208.       ],
  209.  
  210.     },
  211.  
  212.     /**
  213.      * Add additional plugins to the compiler.
  214.      *
  215.      * See: http://webpack.github.io/docs/configuration.html#plugins
  216.      */
  217.     plugins: [
  218.       // Use for DLLs
  219.       // new AssetsPlugin({
  220.       //   path: helpers.root('dist'),
  221.       //   filename: 'webpack-assets.json',
  222.       //   prettyPrint: true
  223.       // }),
  224.  
  225.       /**
  226.        * Plugin: ForkCheckerPlugin
  227.        * Description: Do type checking in a separate process, so webpack don't need to wait.
  228.        *
  229.        * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
  230.        */
  231.       new CheckerPlugin(),
  232.       /**
  233.        * Plugin: CommonsChunkPlugin
  234.        * Description: Shares common code between the pages.
  235.        * It identifies common modules and put them into a commons chunk.
  236.        *
  237.        * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
  238.        * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
  239.        */
  240.       new CommonsChunkPlugin({
  241.         name: 'polyfills',
  242.         chunks: ['polyfills']
  243.       }),
  244.       /**
  245.        * This enables tree shaking of the vendor modules
  246.        */
  247.       // new CommonsChunkPlugin({
  248.       //   name: 'vendor',
  249.       //   chunks: ['main'],
  250.       //   minChunks: module => /node_modules/.test(module.resource)
  251.       // }),
  252.       /**
  253.        * Specify the correct order the scripts will be injected in
  254.        */
  255.       // new CommonsChunkPlugin({
  256.       //   name: ['polyfills', 'vendor'].reverse()
  257.       // }),
  258.       // new CommonsChunkPlugin({
  259.       //   name: ['manifest'],
  260.       //   minChunks: Infinity,
  261.       // }),
  262.  
  263.       /**
  264.        * Plugin: ContextReplacementPlugin
  265.        * Description: Provides context to Angular's use of System.import
  266.        *
  267.        * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
  268.        * See: https://github.com/angular/angular/issues/11580
  269.        */
  270.       new ContextReplacementPlugin(
  271.         /**
  272.          * The (\\|\/) piece accounts for path separators in *nix and Windows
  273.          */
  274.         /angular(\\|\/)core(\\|\/)@angular/,
  275.         helpers.root('src'), // location of your src
  276.         {
  277.           /**
  278.            * Your Angular Async Route paths relative to this root directory
  279.            */
  280.         }
  281.       ),
  282.  
  283.       /**
  284.        * Plugin: CopyWebpackPlugin
  285.        * Description: Copy files and directories in webpack.
  286.        *
  287.        * Copies project static assets.
  288.        *
  289.        * See: https://www.npmjs.com/package/copy-webpack-plugin
  290.        */
  291.       new CopyWebpackPlugin([
  292.         { from: 'src/assets', to: 'assets' },
  293.         { from: 'src/meta'}
  294.       ],
  295.         isProd ? { ignore: [ 'mock-data/**/*' ] } : undefined
  296.       ),
  297.  
  298.       /*
  299.        * Plugin: PreloadWebpackPlugin
  300.        * Description: Preload is a web standard aimed at improving
  301.        * performance and granular loading of resources.
  302.        *
  303.        * See: https://github.com/GoogleChrome/preload-webpack-plugin
  304.        */
  305.       //new PreloadWebpackPlugin({
  306.       //  rel: 'preload',
  307.       //  as: 'script',
  308.       //  include: ['polyfills', 'vendor', 'main'].reverse(),
  309.       //  fileBlacklist: ['.css', '.map']
  310.       //}),
  311.       //new PreloadWebpackPlugin({
  312.       //  rel: 'prefetch',
  313.       //  as: 'script',
  314.       //  include: 'asyncChunks'
  315.       //}),
  316.  
  317.       /**
  318.        * Plugin: ScriptExtHtmlWebpackPlugin
  319.        * Description: Enhances html-webpack-plugin functionality
  320.        * with different deployment options for your scripts including:
  321.        *
  322.        * See: https://github.com/numical/script-ext-html-webpack-plugin
  323.        */
  324.       new ScriptExtHtmlWebpackPlugin({
  325.         sync: /polyfill|vendor/,
  326.         defaultAttribute: 'async',
  327.         preload: [/polyfill|vendor|main/],
  328.         prefetch: [/chunk/]
  329.       }),
  330.  
  331.       /*
  332.       * Plugin: HtmlWebpackPlugin
  333.       * Description: Simplifies creation of HTML files to serve your webpack bundles.
  334.       * This is especially useful for webpack bundles that include a hash in the filename
  335.       * which changes every compilation.
  336.       *
  337.       * See: https://github.com/ampedandwired/html-webpack-plugin
  338.       */
  339.       new HtmlWebpackPlugin({
  340.         template: 'src/index.html',
  341.         title: METADATA.title,
  342.         chunksSortMode: 'dependency',
  343.         metadata: METADATA,
  344.         inject: 'body'
  345.       }),
  346.  
  347.       /**
  348.        * Plugin: HtmlElementsPlugin
  349.        * Description: Generate html tags based on javascript maps.
  350.        *
  351.        * If a publicPath is set in the webpack output configuration, it will be automatically added to
  352.        * href attributes, you can disable that by adding a "=href": false property.
  353.        * You can also enable it to other attribute by settings "=attName": true.
  354.        *
  355.        * The configuration supplied is map between a location (key) and an element definition object (value)
  356.        * The location (key) is then exported to the template under then htmlElements property in webpack configuration.
  357.        *
  358.        * Example:
  359.        *  Adding this plugin configuration
  360.        *  new HtmlElementsPlugin({
  361.        *    headTags: { ... }
  362.        *  })
  363.        *
  364.        *  Means we can use it in the template like this:
  365.        *  <%= webpackConfig.htmlElements.headTags %>
  366.        *
  367.        * Dependencies: HtmlWebpackPlugin
  368.        */
  369.       new HtmlElementsPlugin({
  370.         headTags: require('./head-config.common')
  371.       }),
  372.  
  373.       /**
  374.        * Plugin LoaderOptionsPlugin (experimental)
  375.        *
  376.        * See: https://gist.github.com/sokra/27b24881210b56bbaff7
  377.        */
  378.       new LoaderOptionsPlugin({}),
  379.  
  380.       new ngcWebpack.NgcWebpackPlugin({
  381.         /**
  382.          * If false the plugin is a ghost, it will not perform any action.
  383.          * This property can be used to trigger AOT on/off depending on your build target (prod, staging etc...)
  384.          *
  385.          * The state can not change after initializing the plugin.
  386.          * @default true
  387.          */
  388.         disabled: !AOT,
  389.         tsConfig: helpers.root('tsconfig.webpack.json'),
  390.         /**
  391.          * A path to a file (resource) that will replace all resource referenced in @Components.
  392.          * For each `@Component` the AOT compiler compiles it creates new representation for the templates (html, styles)
  393.          * of that `@Components`. It means that there is no need for the source templates, they take a lot of
  394.          * space and they will be replaced by the content of this resource.
  395.          *
  396.          * To leave the template as is set to a falsy value (the default).
  397.          *
  398.          * TIP: Use an empty file as an overriding resource. It is recommended to use a ".js" file which
  399.          * usually has small amount of loaders hence less performance impact.
  400.          *
  401.          * > This feature is doing NormalModuleReplacementPlugin for AOT compiled resources.
  402.          *
  403.          * ### resourceOverride and assets
  404.          * If you reference assets in your styles/html that are not inlined and you expect a loader (e.g. url-loader)
  405.          * to copy them, don't use the `resourceOverride` feature as it does not support this feature at the moment.
  406.          * With `resourceOverride` the end result is that webpack will replace the asset with an href to the public
  407.          * assets folder but it will not copy the files. This happens because the replacement is done in the AOT compilation
  408.          * phase but in the bundling it won't happen (it's being replaced with and empty file...)
  409.          *
  410.          * @default undefined
  411.          */
  412.         resourceOverride: helpers.root('config/resource-override.js')
  413.       }),
  414.  
  415.       /**
  416.        * Plugin: InlineManifestWebpackPlugin
  417.        * Inline Webpack's manifest.js in index.html
  418.        *
  419.        * https://github.com/szrenwei/inline-manifest-webpack-plugin
  420.        */
  421.       new InlineManifestWebpackPlugin(),
  422.     ],
  423.  
  424.     /**
  425.      * Include polyfills or mocks for various node stuff
  426.      * Description: Node configuration
  427.      *
  428.      * See: https://webpack.github.io/docs/configuration.html#node
  429.      */
  430.     node: {
  431.       global: true,
  432.       crypto: 'empty',
  433.       process: true,
  434.       module: false,
  435.       clearImmediate: false,
  436.       setImmediate: false
  437.     }
  438.  
  439.   };
  440. }
  441.  
downloadwebpack.common.js Source code - Download angular-starter Source code
Related Source Codes/Software:
django-rest-framework - Web APIs for Django. http:/... 2017-06-10
lectures - Oxford Deep NLP 2017 course 2017-06-10
algorithms - Minimal examples of data structures and algorithms... 2017-06-10
Awesome-Hacking - A collection of various awesome lists for hackers,... 2017-06-09
lottie-ios - An iOS library to natively render After Effects ve... 2017-06-09
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
angular-starter - 2017-06-10

 Back to top