1 const helpers
= require('./helpers')
2 const webpackMerge
= require('webpack-merge') // used to merge webpack configs
3 const webpackMergeDll
= webpackMerge
.strategy({plugins: 'replace'})
4 const commonConfig
= require('./webpack.common.js') // the settings that are common to prod and dev
5 const videoEmbedConfig
= require('./webpack.video-embed.js')
10 const AddAssetHtmlPlugin
= require('add-asset-html-webpack-plugin')
11 const DefinePlugin
= require('webpack/lib/DefinePlugin')
12 const NamedModulesPlugin
= require('webpack/lib/NamedModulesPlugin')
13 const LoaderOptionsPlugin
= require('webpack/lib/LoaderOptionsPlugin')
14 const HotModuleReplacementPlugin
= require('webpack/lib/HotModuleReplacementPlugin')
19 const ENV
= process
.env
.ENV
= process
.env
.NODE_ENV
= 'development'
20 const HOST
= process
.env
.HOST
|| 'localhost'
21 const PORT
= process
.env
.PORT
|| 3000
22 const PUBLIC
= process
.env
.PUBLIC_DEV
|| HOST
+ ':' + PORT
23 const AOT
= process
.env
.BUILD_AOT
|| helpers
.hasNpmFlag('aot')
24 const HMR
= helpers
.hasProcessFlag('hot')
32 API_URL: 'http://localhost:9000'
35 const DllBundlesPlugin
= require('webpack-dll-bundles-plugin').DllBundlesPlugin
38 * Webpack configuration
40 * See: http://webpack.github.io/docs/configuration.html#cli
42 module
.exports = function (env
) {
45 webpackMerge(commonConfig({ env: ENV
}), {
47 * Developer tool to enhance debugging
49 * See: http://webpack.github.io/docs/configuration.html#devtool
50 * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
52 devtool: 'cheap-module-source-map',
55 * Options affecting the output of the compilation.
57 * See: http://webpack.github.io/docs/configuration.html#output
61 * The output directory as absolute path (required).
63 * See: http://webpack.github.io/docs/configuration.html#output-path
65 path: helpers
.root('dist'),
68 * Specifies the name of each output file on disk.
69 * IMPORTANT: You must not specify an absolute path here!
71 * See: http://webpack.github.io/docs/configuration.html#output-filename
73 filename: '[name].bundle.js',
76 * The filename of the SourceMaps for the JavaScript files.
77 * They are inside the output.path directory.
79 * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
81 sourceMapFilename: '[name].map',
83 /** The filename of non-entry chunks as relative path
84 * inside the output.path directory.
86 * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
88 chunkFilename: '[id].chunk.js',
96 // Too slow, life is short
102 // loader: 'tslint-loader',
104 // configFile: 'tslint.json'
109 // /\.(spec|e2e)\.ts$/,
119 * Plugin: DefinePlugin
120 * Description: Define free variables.
121 * Useful for having development builds with debug logging or adding global constants.
123 * Environment helpers
125 * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
127 // NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
129 'ENV': JSON
.stringify(METADATA
.ENV
),
131 'API_URL': JSON
.stringify(METADATA
.API_URL
),
132 'process.version': JSON
.stringify(process
.version
),
133 'process.env.ENV': JSON
.stringify(METADATA
.ENV
),
134 'process.env.NODE_ENV': JSON
.stringify(METADATA
.ENV
),
135 'process.env.HMR': METADATA
.HMR
138 new DllBundlesPlugin({
144 path: 'zone.js/dist/zone.js'
148 path: 'zone.js/dist/long-stack-trace-zone.js'
152 '@angular/platform-browser',
153 '@angular/platform-browser-dynamic',
163 dllDir: helpers
.root('dll'),
164 webpackConfig: webpackMergeDll(commonConfig({env: ENV
}), {
165 devtool: 'cheap-module-source-map',
171 * Plugin: AddAssetHtmlPlugin
172 * Description: Adds the given JS or CSS file to the files
173 * Webpack knows about, and put it into the list of assets
174 * html-webpack-plugin injects into the generated html.
176 * See: https://github.com/SimenB/add-asset-html-webpack-plugin
178 new AddAssetHtmlPlugin([
179 { filepath: helpers
.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
180 { filepath: helpers
.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
184 * Plugin: NamedModulesPlugin (experimental)
185 * Description: Uses file names as module name.
187 * See: https://github.com/webpack/webpack/commit/a04ffb928365b19feb75087c63f13cadfc08e1eb
189 new NamedModulesPlugin(),
192 * Plugin LoaderOptionsPlugin (experimental)
194 * See: https://gist.github.com/sokra/27b24881210b56bbaff7
196 new LoaderOptionsPlugin({
201 * Static analysis linter for TypeScript advanced options configuration
202 * Description: An extensible linter for the TypeScript language.
204 * See: https://github.com/wbuchwalter/tslint-loader
214 // https://github.com/bholloway/resolve-url-loader/issues/36
215 // https://github.com/jtangelder/sass-loader/issues/289
218 path: helpers
.root('dist')
224 new HotModuleReplacementPlugin()
228 * Webpack Development Server configuration
229 * Description: The webpack-dev-server is a little node.js Express server.
230 * The server emits information about the compilation state to the client,
231 * which reacts to those events.
233 * See: https://webpack.github.io/docs/webpack-dev-server.html
238 historyApiFallback: true,
241 ignored: /node_modules/
246 * Include polyfills or mocks for various node stuff
247 * Description: Node configuration
249 * See: https://webpack.github.io/docs/configuration.html#node
257 clearImmediate: false,
262 videoEmbedConfig({env: ENV
})