webpack.common.js
const helpers = require('./helpers');
/**
* Webpack Plugins
*
* problem with copy-webpack-plugin
*/
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
const buildUtils = require('./build-utils');
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
const isProd = options.env === 'production';
const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
const entry = {
polyfills: './src/polyfills.browser.ts',
main: './src/main.browser.ts'
};
Object.assign(ngcWebpackConfig.plugin, {
tsConfigPath: METADATA.tsConfigPath,
mainPath: entry.main
});
return {
entry: entry,
resolve: {
mainFields: [ ...(supportES2015 ? ['es2015'] : []), 'browser', 'module', 'main' ],
extensions: ['.ts', '.js', '.json'],
modules: [helpers.root('src'), helpers.root('node_modules')],
alias: buildUtils.rxjsAlias(supportES2015)
},
module: {
rules: [
...ngcWebpackConfig.loaders,
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'styles')]
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
},
{
test: /\.html$/,
use: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
/**
* File loader for supporting images, for example, in CSS files.
*/
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
/* File loader for supporting fonts, for example, in CSS files.
*/
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader'
}
],
},
plugins: [
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'AOT': METADATA.AOT,
'process.env.ENV': JSON.stringify(METADATA.ENV),
'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
'process.env.HMR': METADATA.HMR
}),
new CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new CommonsChunkPlugin({
minChunks: Infinity,
name: 'inline'
}),
new CommonsChunkPlugin({
name: 'main',
async: 'common',
children: true,
minChunks: 2
}),
new CopyWebpackPlugin([
{ from: helpers.root('src/assets'), to: 'assets' },
{ from: helpers.root('src/assets/img'), to: 'assets/img' },
{ from: helpers.root('src/meta')},
{ from: helpers.root('node_modules/font-awesome'), to: 'font-awesome' },
{ from: helpers.root('node_modules/primeng/resources/primeng.min.css'), to: 'resources' },
{ from: helpers.root('node_modules/primeng/resources/themes/_theme.scss'), to: 'resources/themes' },
{ from: helpers.root('src/assets/css/themes/citi-prime'), to: 'resources/themes/citi-prime' }
],
isProd ? { ignore: [ 'mock-data/**/*' ] } : undefined
),
/*
* Plugin: HtmlWebpackPlugin
* Description: 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: 'src/index.html',
title: METADATA.title,
chunksSortMode: function (a, b) {
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
},
metadata: METADATA,
inject: 'body',
xhtml: true,
minify: isProd ? {
caseSensitive: true,
collapseWhitespace: true,
keepClosingSlash: true
} : false//,
//baseUrl: isProd ? '.' : '/'
}),
new ScriptExtHtmlWebpackPlugin({
sync: /inline|polyfills|vendor/,
defaultAttribute: 'async',
preload: [/polyfills|vendor|main/],
prefetch: [/chunk/]
}),
new HtmlElementsPlugin({
publicPath: '/',
headTags: require('./head-config.common')
}),
new LoaderOptionsPlugin({}),
new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin),
new InlineManifestWebpackPlugin(),
],
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
};
}