webpack.config.js.template 3.59 KB
Newer Older
Jaden's avatar
Jaden committed
1 2 3 4 5
/* eslint-disable */
const { resolve } = require('path');
var webpack = require('webpack')
const VisualizerPlugin = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
6
const TerserPlugin = require('terser-webpack-plugin')
Jaden's avatar
Jaden committed
7

8
const dist = resolve(__dirname, '%%jsfiles%%');
Jaden's avatar
Jaden committed
9 10 11 12 13 14 15 16

const isExternal = (module) => module.context && module.context.indexOf('node_modules') === -1;

module.exports = {
	entry: {
		main: [
			'react-hot-loader/patch',
			// all our code starts here
17
			'./main.jsx',
Jaden's avatar
Jaden committed
18 19
		]
	},
20 21
	mode: 'development',
	devtool: 'inline-source-map',
Jaden's avatar
Jaden committed
22 23 24 25
	output: {
		// use [name] for sanity checks & debugging
		filename: '[name].js',
		// output in './dist/'
26
		path: dist,
27 28
		publicPath: '/',
		globalObject: 'this',
Jaden's avatar
Jaden committed
29 30 31 32 33 34 35 36 37 38
	},
	module: {
		rules: [
			// load our js files with babel-loader
			{
				test: /\.js(x)?$/,
				loader: 'babel-loader',
				// js deps shouldnt need any loaders
				exclude: /node_modules/
			},
39 40 41 42 43 44 45 46
			// web/shared worker files
			{
				test: /\.worker\.js$/,
				use: [
					'worker-loader',
					'babel-loader',
				]
			},
Jaden's avatar
Jaden committed
47 48 49 50 51 52 53 54 55 56 57
			// load css with:
			{
				test: /\.css$/,
				use: [
					// style-loader -> pulls in the file initially
					'style-loader',
					// css-loader -> handles css
					'css-loader',
					// postcss-loader -> postprocess css (like babel for css)
					'postcss-loader'
				],
58 59 60 61 62 63 64 65 66 67 68
				exclude: /node_modules/,
			},
			{
				test: /\.css$/,
				use: [
					// style-loader -> pulls in the file initially
					'style-loader',
					// css-loader -> handles css
					'css-loader',
				],
				include: /node_modules/,
Jaden's avatar
Jaden committed
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
			},
			// files should be handled by file-loader
			{
				test: /\.(png|jpeg(2)?|gif)(\?[a-z0-9]+)?$/,
				loader: 'file-loader'
			},
			// fonts should be handled by file-loader but with special output format
			{
				test: /\.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
				loader: 'file-loader?name=fonts/[name].[ext]?[hash]'
			},
			// special loader for svg
			{
				test: /\.(svg)(\?[a-z0-9]+)?$/,
				loader: 'svg-inline-loader'
			}
		]
	},
	resolve: {
		extensions: [
			'.js', '.jsx'
		],
		alias: {
			// icons
			/*
			'icon': resolve(__dirname, './node_modules/feather-icons/dist/icons'),
			*/
96 97
			'@store': resolve(__dirname, './src/store'),
			'@helpers': resolve(__dirname, './src/helpers'),
98
			'@test': resolve(__dirname, './test'),
Jaden's avatar
Jaden committed
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
		}
	},
	devServer: {
	},
	plugins: [
		//uses the index.ejs template to generate dynamic html pages based on hashes
		new HtmlWebpackPlugin({
			alwaysWriteToDisk: true,
			template: 'index.html'
		}),


		/*******************
		 * POST-PROCESSING *
		 *******************/

		//generate a little viz for insight into bundle contents/sizes
		new VisualizerPlugin()
	]
}

if(process.env.NODE_ENV === 'debug'){
	// setup the devserver
	module.exports.devServer = {
		// use the history api if necessary
		historyApiFallback: true,

		// serve the content in the output path
		contentBase: dist,

Jaden's avatar
Jaden committed
129
		port: 9101
Jaden's avatar
Jaden committed
130 131 132 133 134 135 136 137 138 139 140 141 142
	}
}

if(process.env.NODE_ENV === 'test'){
	// when testing with karma, almost all plugins are useless
	module.exports.plugins = [
		new webpack.NamedModulesPlugin()
	];
	// make sure to use fancy sourcemaps
	module.devtool = 'inline-source-map'
}

// PROD
143
// TODO: pull out into different webpack config
Jaden's avatar
Jaden committed
144
if (process.env.NODE_ENV === 'production') {
145
	module.mode = 'production';
146
	module.exports.output.publicPath = './';
Jaden's avatar
Jaden committed
147 148 149 150 151 152 153 154 155
	module.exports.plugins = [
		// make sure the env is the string 'production'
		new webpack.DefinePlugin({
			'process.env': {
				// need the nested quotes!
				NODE_ENV: '"production"'
			}
		}),
	].concat(module.exports.plugins);
156 157 158
	module.exports.optimization = {
		minimizer: [new TerserPlugin()]
	};
Jaden's avatar
Jaden committed
159
}