BVB Source Codes

angular-starter Show webpack.dev.js Source code

Return Download angular-starter: download webpack.dev.js Source code - Download angular-starter Source code - Type:.js
  1. /**
  2.  * @author: @AngularClass
  3.  */
  4.  
  5. const helpers = require('./helpers');
  6. const webpackMerge = require('webpack-merge'); // used to merge webpack configs
  7. // const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
  8. const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
  9.  
  10. /**
  11.  * Webpack Plugins
  12.  */
  13. const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
  14. const DefinePlugin = require('webpack/lib/DefinePlugin');
  15. const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
  16. const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
  17.  
  18. /**
  19.  * Webpack Constants
  20.  */
  21. const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
  22. const HOST = process.env.HOST || 'localhost';
  23. const PORT = process.env.PORT || 3000;
  24. const HMR = helpers.hasProcessFlag('hot');
  25. const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  26.   host: HOST,
  27.   port: PORT,
  28.   ENV: ENV,
  29.   HMR: HMR
  30. });
  31.  
  32.  
  33. // const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
  34.  
  35. /**
  36.  * Webpack configuration
  37.  *
  38.  * See: http://webpack.github.io/docs/configuration.html#cli
  39.  */
  40. module.exports = function (options) {
  41.   return webpackMerge(commonConfig({env: ENV}), {
  42.  
  43.     /**
  44.      * Developer tool to enhance debugging
  45.      *
  46.      * See: http://webpack.github.io/docs/configuration.html#devtool
  47.      * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  48.      */
  49.     devtool: 'cheap-module-source-map',
  50.  
  51.     /**
  52.      * Options affecting the output of the compilation.
  53.      *
  54.      * See: http://webpack.github.io/docs/configuration.html#output
  55.      */
  56.     output: {
  57.  
  58.       /**
  59.        * The output directory as absolute path (required).
  60.        *
  61.        * See: http://webpack.github.io/docs/configuration.html#output-path
  62.        */
  63.       path: helpers.root('dist'),
  64.  
  65.       /**
  66.        * Specifies the name of each output file on disk.
  67.        * IMPORTANT: You must not specify an absolute path here!
  68.        *
  69.        * See: http://webpack.github.io/docs/configuration.html#output-filename
  70.        */
  71.       filename: '[name].bundle.js',
  72.  
  73.       /**
  74.        * The filename of the SourceMaps for the JavaScript files.
  75.        * They are inside the output.path directory.
  76.        *
  77.        * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
  78.        */
  79.       sourceMapFilename: '[file].map',
  80.  
  81.       /** The filename of non-entry chunks as relative path
  82.        * inside the output.path directory.
  83.        *
  84.        * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
  85.        */
  86.       chunkFilename: '[id].chunk.js',
  87.  
  88.       library: 'ac_[name]',
  89.       libraryTarget: 'var',
  90.     },
  91.  
  92.     module: {
  93.  
  94.       rules: [
  95.  
  96.         /**
  97.          * Css loader support for *.css files (styles directory only)
  98.          * Loads external css styles into the DOM, supports HMR
  99.          *
  100.          */
  101.         {
  102.           test: /\.css$/,
  103.           use: ['style-loader', 'css-loader'],
  104.           include: [helpers.root('src', 'styles')]
  105.         },
  106.  
  107.         /**
  108.          * Sass loader support for *.scss files (styles directory only)
  109.          * Loads external sass styles into the DOM, supports HMR
  110.          *
  111.          */
  112.         {
  113.           test: /\.scss$/,
  114.           use: ['style-loader', 'css-loader', 'sass-loader'],
  115.           include: [helpers.root('src', 'styles')]
  116.         },
  117.  
  118.       ]
  119.  
  120.     },
  121.  
  122.     plugins: [
  123.  
  124.       /**
  125.        * Plugin: DefinePlugin
  126.        * Description: Define free variables.
  127.        * Useful for having development builds with debug logging or adding global constants.
  128.        *
  129.        * Environment helpers
  130.        *
  131.        * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
  132.        *
  133.        * NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
  134.        */
  135.       new DefinePlugin({
  136.         'ENV': JSON.stringify(METADATA.ENV),
  137.         'HMR': METADATA.HMR,
  138.         'process.env': {
  139.           'ENV': JSON.stringify(METADATA.ENV),
  140.           'NODE_ENV': JSON.stringify(METADATA.ENV),
  141.           'HMR': METADATA.HMR,
  142.         }
  143.       }),
  144.  
  145.       // new DllBundlesPlugin({
  146.       //   bundles: {
  147.       //     polyfills: [
  148.       //       'core-js',
  149.       //       {
  150.       //         name: 'zone.js',
  151.       //         path: 'zone.js/dist/zone.js'
  152.       //       },
  153.       //       {
  154.       //         name: 'zone.js',
  155.       //         path: 'zone.js/dist/long-stack-trace-zone.js'
  156.       //       },
  157.       //     ],
  158.       //     vendor: [
  159.       //       '@angular/platform-browser',
  160.       //       '@angular/platform-browser-dynamic',
  161.       //       '@angular/core',
  162.       //       '@angular/common',
  163.       //       '@angular/forms',
  164.       //       '@angular/http',
  165.       //       '@angular/router',
  166.       //       '@angularclass/hmr',
  167.       //       'rxjs',
  168.       //     ]
  169.       //   },
  170.       //   dllDir: helpers.root('dll'),
  171.       //   webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
  172.       //     devtool: 'cheap-module-source-map',
  173.       //     plugins: []
  174.       //   })
  175.       // }),
  176.  
  177.       /**
  178.        * Plugin: AddAssetHtmlPlugin
  179.        * Description: Adds the given JS or CSS file to the files
  180.        * Webpack knows about, and put it into the list of assets
  181.        * html-webpack-plugin injects into the generated html.
  182.        *
  183.        * See: https://github.com/SimenB/add-asset-html-webpack-plugin
  184.        */
  185.       // new AddAssetHtmlPlugin([
  186.       //   { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
  187.       //   { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
  188.       // ]),
  189.  
  190.       /**
  191.        * Plugin: NamedModulesPlugin (experimental)
  192.        * Description: Uses file names as module name.
  193.        *
  194.        * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
  195.        */
  196.       // new NamedModulesPlugin(),
  197.  
  198.       /**
  199.        * Plugin LoaderOptionsPlugin (experimental)
  200.        *
  201.        * See: https://gist.github.com/sokra/27b24881210b56bbaff7
  202.        */
  203.       new LoaderOptionsPlugin({
  204.         debug: true,
  205.         options: {
  206.  
  207.         }
  208.       }),
  209.  
  210.     ],
  211.  
  212.     /**
  213.      * Webpack Development Server configuration
  214.      * Description: The webpack-dev-server is a little node.js Express server.
  215.      * The server emits information about the compilation state to the client,
  216.      * which reacts to those events.
  217.      *
  218.      * See: https://webpack.github.io/docs/webpack-dev-server.html
  219.      */
  220.     devServer: {
  221.       port: METADATA.port,
  222.       host: METADATA.host,
  223.       historyApiFallback: true,
  224.       watchOptions: {
  225.         // if you're using Docker you may need this
  226.         // aggregateTimeout: 300,
  227.         // poll: 1000,
  228.         ignored: /node_modules/
  229.       },
  230.       /**
  231.       * Here you can access the Express app object and add your own custom middleware to it.
  232.       *
  233.       * See: https://webpack.github.io/docs/webpack-dev-server.html
  234.       */
  235.       setup: function(app) {
  236.         // For example, to define custom handlers for some paths:
  237.         // app.get('/some/path', function(req, res) {
  238.         //   res.json({ custom: 'response' });
  239.         // });
  240.       }
  241.     },
  242.  
  243.     /**
  244.      * Include polyfills or mocks for various node stuff
  245.      * Description: Node configuration
  246.      *
  247.      * See: https://webpack.github.io/docs/configuration.html#node
  248.      */
  249.     node: {
  250.       global: true,
  251.       crypto: 'empty',
  252.       process: true,
  253.       module: false,
  254.       clearImmediate: false,
  255.       setImmediate: false
  256.     }
  257.  
  258.   });
  259. }
  260.  
downloadwebpack.dev.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