1'use strict';
2
3// Modules
4var webpack = require('webpack');
5var autoprefixer = require('autoprefixer');
6var HtmlWebpackInlineSourcePlugin =
7    require('html-webpack-inline-source-plugin');
8var HtmlWebpackPlugin = require('html-webpack-plugin');
9var CopyWebpackPlugin = require('copy-webpack-plugin');
10var CompressionPlugin = require('compression-webpack-plugin');
11var path = require('path');
12var FilterChunkWebpackPlugin = require('filter-chunk-webpack-plugin');
13var MiniCssExtractPlugin = require('mini-css-extract-plugin');
14
15const isPathInside = require('is-path-inside')
16const pkgDir = require('pkg-dir')
17const coreJsDir = pkgDir.sync(require.resolve('core-js'))
18
19module.exports = (env, options) => {
20  var isProd = options.mode === 'production';
21
22  /**
23   * Config
24   * Reference: http://webpack.github.io/docs/configuration.html
25   * This is the object where all configuration gets set
26   */
27  var config = {};
28
29  /**
30   * Entry
31   * Reference: http://webpack.github.io/docs/configuration.html#entry
32   * Should be an empty object if it's generating a test build
33   * Karma will set this when it's a test build
34   */
35  config.entry = {app: './app/index.js'};
36
37  /**
38   * Output
39   * Reference: http://webpack.github.io/docs/configuration.html#output
40   * Should be an empty object if it's generating a test build
41   * Karma will handle setting it up for you when it's a test build
42   */
43  config.output = {
44    // Absolute output directory
45    path: __dirname + '/dist',
46
47    // Output path from the view of the page
48    // Uses webpack-dev-server in development
49    publicPath: '/',
50
51    // Filename for entry points
52    // Only adds hash in build mode
53    filename: '[name].bundle.js',
54
55    // Filename for non-entry points
56    // Only adds hash in build mode
57    chunkFilename: '[name].bundle.js'
58  };
59
60  /**
61   * Loaders
62   * Reference:
63   * http://webpack.github.io/docs/configuration.html#module-loaders
64   * List: http://webpack.github.io/docs/list-of-loaders.html
65   * This handles most of the magic responsible for converting modules
66   */
67
68  // Initialize module
69  config.module = {
70    rules: [
71      {
72        // JS LOADER
73        // Reference: https://github.com/babel/babel-loader
74        // Transpile .js files using babel-loader
75        // Compiles ES6 and ES7 into ES5 code
76        test: /\.js$/,
77        exclude: (input) => isPathInside(input, coreJsDir),
78        use: {
79          loader: 'babel-loader',
80          options: {
81            presets: [['@babel/preset-env', {useBuiltIns: 'entry', corejs: 3}]]
82          }
83        }
84      },
85      {
86        // ASSET LOADER
87        // Reference: https://github.com/webpack/file-loader
88        // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to
89        // output
90        // Rename the file using the asset hash
91        // Pass along the updated reference to your code
92        // You can add here any file extension you want to get copied
93        // to your output
94        // Excludes .svg files in icons directory
95        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|ico)$/,
96        exclude: /icons\/.*\.svg$/,
97        loader: 'file-loader',
98        options: {name: '[path][name].[ext]'}
99      },
100      {
101        // INLINE SVG LOADER
102        // Inlines .svg assets in icons directory
103        // needed specifically for icon-provider.js directive
104        test: /icons\/.*\.svg$/,
105        loader: 'svg-inline-loader'
106      },
107      {
108        // HTML LOADER
109        // Reference: https://github.com/webpack/raw-loader
110        // Allow loading html through js
111        test: /\.html$/,
112        loader: 'html-loader'
113      },
114      {
115        test: /\.css$/,
116        use: [MiniCssExtractPlugin.loader, 'css-loader'],
117      },
118      {
119        test: /\.scss$/,
120        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
121      }
122    ]
123  };
124
125  config.plugins = [
126    new HtmlWebpackPlugin({
127      template: './app/index.html',
128      inject: 'body',
129      favicon: './app/assets/images/favicon.ico',
130      minify: {removeComments: true, collapseWhitespace: true},
131
132    }),
133    new MiniCssExtractPlugin(),
134
135    new FilterChunkWebpackPlugin({
136      patterns: [
137        '*glyphicons-halflings-regular*.ttf',
138        '*glyphicons-halflings-regular*.svg',
139        '*glyphicons-halflings-regular*.eot',
140        '*glyphicons-halflings-regular*.woff2',
141      ]
142    })
143  ];
144
145  // Add build specific plugins
146  if (isProd) {
147    config.plugins.push(new CompressionPlugin({deleteOriginalAssets: true}));
148  }
149
150  /**
151   * Dev server configuration
152   * Reference: http://webpack.github.io/docs/configuration.html#devserver
153   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
154   */
155  config.devServer = {contentBase: './src/public', stats: 'minimal'};
156
157  return config;
158};
159