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
|
'use strict';
// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackInlineSourcePlugin =
require('html-webpack-inline-source-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');
var path = require('path');
var FilterChunkWebpackPlugin = require('filter-chunk-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isPathInside = require('is-path-inside')
const pkgDir = require('pkg-dir')
const coreJsDir = pkgDir.sync(require.resolve('core-js'))
module.exports = (env, options) => {
var isProd = options.mode === 'production';
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
* Should be an empty object if it's generating a test build
* Karma will set this when it's a test build
*/
config.entry = {app: './app/index.js'};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
* Should be an empty object if it's generating a test build
* Karma will handle setting it up for you when it's a test build
*/
config.output = {
// Absolute output directory
path: __dirname + '/dist',
// Output path from the view of the page
// Uses webpack-dev-server in development
publicPath: '/',
// Filename for entry points
// Only adds hash in build mode
filename: '[name].bundle.js',
// Filename for non-entry points
// Only adds hash in build mode
chunkFilename: '[name].bundle.js'
};
/**
* Loaders
* Reference:
* http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
// Initialize module
config.module = {
rules: [
{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
exclude: (input) => isPathInside(input, coreJsDir),
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', {useBuiltIns: 'entry', corejs: 3}]]
}
}
},
{
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to
// output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied
// to your output
// Excludes .svg files in icons directory
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|ico)$/,
exclude: /icons\/.*\.svg$/,
loader: 'file-loader',
options: {name: '[path][name].[ext]'}
},
{
// INLINE SVG LOADER
// Inlines .svg assets in icons directory
// needed specifically for icon-provider.js directive
test: /icons\/.*\.svg$/,
loader: 'svg-inline-loader'
},
{
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
};
config.plugins = [
new HtmlWebpackPlugin({
template: './app/index.html',
inject: 'body',
favicon: './app/assets/images/favicon.ico',
minify: {removeComments: true, collapseWhitespace: true},
}),
new MiniCssExtractPlugin(),
new FilterChunkWebpackPlugin({
patterns: [
'*glyphicons-halflings-regular*.ttf',
'*glyphicons-halflings-regular*.svg',
'*glyphicons-halflings-regular*.eot',
'*glyphicons-halflings-regular*.woff2',
]
})
];
// Add build specific plugins
if (isProd) {
config.plugins.push(new CompressionPlugin({deleteOriginalAssets: true}));
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {contentBase: './src/public', stats: 'minimal'};
return config;
};
|
