-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
138 lines (130 loc) · 4.17 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
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// custom build directory, can be changed
const BUILD_DIR = path.resolve(__dirname, 'public');
module.exports = {
mode: 'development',
// the first two entry points enable "hot" CSS and auto-refreshes for JS
entry: [
'react-hot-loader/patch',
// contains the entire app, can be changed locations but has to be the
// highest rendering component, maps to html root
'./src/index.js',
],
output: {
path: BUILD_DIR,
publicPath: '/',
filename: 'bundle.js',
},
// hot-loader
devServer: {
contentBase: BUILD_DIR,
hot: true,
clientLogLevel: 'none',
// ignores extra logging
stats: {
colors: true,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: false,
warnings: true,
publicPath: false,
},
},
// might be slower than eval-source-map but yields better mapped code
// works well with third party tools, if too slow, switch to eval
devtool: 'inline-source-map',
plugins: [
// hot module replacement refreshes JS
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: 'reVsearch',
template: 'src/config/index.ejs',
}),
],
resolve: {
modules: [__dirname, './node_modules'],
// paths can be added to shorten paths
alias: {
Containers: path.resolve(__dirname, 'src/app/components/containers'),
Presentationals: path.resolve(__dirname, 'src/app/components/presentationals'),
Elements: path.resolve(__dirname, 'src/app/components/elements'),
Globals: path.resolve(__dirname, 'src/app/globals'),
Actions: path.resolve(__dirname, 'src/app/redux/actions'),
Reducers: path.resolve(__dirname, 'src/app/redux/reducers'),
Images: path.resolve(__dirname, 'src/images'),
Style: path.resolve(__dirname, 'src/app/stylesheets'),
Constants$: path.resolve(__dirname, 'src/app/globals/constants.js'),
},
extensions: ['*', '.js', '.jsx', '.ico'],
},
// loaders for specific files and file types
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre',
options: {
emitWarning: true,
emitError: true,
failonError: false,
configFile: './.eslintrc.json',
},
},
{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/,
query: {
presets: ['react', 'es2015'],
},
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
},
},
{
test: /\.css$/,
// will need to add sass compatibility when we switch
use: ['style-loader', 'css-loader'],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
loader: 'file-loader',
query: {
name: 'images/[name].[ext]',
},
},
],
},
stats: {
colors: true,
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
},
};