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