/
webpack.config.js
172 lines (167 loc) · 7.82 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig);
// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
const cssRules = [
{ loader: 'css-loader' },
];
module.exports = ({ production, server, extractCss, coverage, analyze, karma } = {}) => ({
resolve: {
extensions: ['.ts', '.js'],
modules: [srcDir, 'node_modules'],
// Enforce single aurelia-binding, to avoid v1/v2 duplication due to
// out-of-date dependencies on 3rd party aurelia plugins
alias: { 'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding') }
},
entry: {
app: ['aurelia-bootstrapper']
},
mode: production ? 'production' : 'development',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
},
optimization: {
runtimeChunk: true, // separates the runtime chunk, required for long term cacheability
// moduleIds is the replacement for HashedModuleIdsPlugin and NamedModulesPlugin deprecated in https://github.com/webpack/webpack/releases/tag/v4.16.0
// changes module id's to use hashes be based on the relative path of the module, required for long term cacheability
moduleIds: 'hashed',
// Use splitChunks to breakdown the App/Aurelia bundle down into smaller chunks
// https://webpack.js.org/plugins/split-chunks-plugin/
splitChunks: {
hidePathInfo: true, // prevents the path from being used in the filename when using maxSize
chunks: "initial",
// sizes are compared against source before minification
maxSize: 200000, // splits chunks if bigger than 200k, adjust as required (maxSize added in webpack v4.15)
cacheGroups: {
default: false, // Disable the built-in groups default & vendors (vendors is redefined below)
// You can insert additional cacheGroup entries here if you want to split out specific modules
// This is required in order to split out vendor css from the app css when using --extractCss
// For example to separate font-awesome and bootstrap:
// fontawesome: { // separates font-awesome css from the app css (font-awesome is only css/fonts)
// name: 'vendor.font-awesome',
// test: /[\\/]node_modules[\\/]font-awesome[\\/]/,
// priority: 100,
// enforce: true
// },
// bootstrap: { // separates bootstrap js from vendors and also bootstrap css from app css
// name: 'vendor.font-awesome',
// test: /[\\/]node_modules[\\/]bootstrap[\\/]/,
// priority: 90,
// enforce: true
// },
// This is the HTTP/1.1 optimised cacheGroup configuration
vendors: { // picks up everything from node_modules as long as the sum of node modules is larger than minSize
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 19,
enforce: true, // causes maxInitialRequests to be ignored, minSize still respected if specified in cacheGroup
minSize: 30000 // use the default minSize
},
vendorsAsync: { // vendors async chunk, remaining asynchronously used node modules as single chunk file
test: /[\\/]node_modules[\\/]/,
name: 'vendors.async',
chunks: 'async',
priority: 9,
reuseExistingChunk: true,
minSize: 10000 // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
},
commonsAsync: { // commons async chunk, remaining asynchronously used modules as single chunk file
name: 'commons.async',
minChunks: 2, // Minimum number of chunks that must share a module before splitting
chunks: 'async',
priority: 0,
reuseExistingChunk: true,
minSize: 10000 // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
}
}
}
},
performance: { hints: false },
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true
},
devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
module: {
rules: [
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? [{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
] : ['style-loader', ...cssRules]
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.ts$/, loader: "ts-loader" },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
...when(coverage, {
test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
include: srcDir, exclude: [/\.(spec|test)\.[jt]s$/i],
enforce: 'post', options: { esModules: true },
})
]
},
plugins: [
...when(!karma, new DuplicatePackageCheckerPlugin()),
new AureliaPlugin(),
new ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new ModuleDependenciesPlugin({
'aurelia-testing': ['./compile-spy', './view-spy']
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
metadata: {
// available in index.ejs //
title, server, baseUrl
}
}),
// ref: https://webpack.js.org/plugins/mini-css-extract-plugin/
...when(extractCss, new MiniCssExtractPlugin({ // updated to match the naming conventions for the js files
filename: production ? 'css/[name].[contenthash].bundle.css' : 'css/[name].[hash].bundle.css',
chunkFilename: production ? 'css/[name].[contenthash].chunk.css' : 'css/[name].[hash].chunk.css'
})),
...when(production || server, new CopyWebpackPlugin([
{ from: 'static', to: outDir, ignore: ['.*'] }])), // ignore dot (hidden) files
...when(analyze, new BundleAnalyzerPlugin())
]
});