-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
167 lines (163 loc) · 6 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
'./private/jsx/entry.js',
],
output: {
path: path.resolve(__dirname, './public/javascripts/'),
publicPath: '/javascripts/',
// publicPath: 'CDN.../javascripts/',
// In development Environment:
// This does not produce a real file. It's just the virtual path that is
// serve in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.json', '.jsx'],
alias: {
'@': path.resolve(__dirname, './private/jsx'),
},
},
module: {
loaders: [
// Process JS with Babel.
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre',
options: {
fix: true,
cache: true,
emitError: true,
// failOnError: true,
},
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'react-hot-loader',
},
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
plugins: [
'transform-runtime',
'transform-class-properties',
[
'import',
{ libraryName: 'antd', style: 'css' },
],
[
'styled-jsx/babel',
{
plugins: ['styled-jsx-plugin-sass'],
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
],
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
},
// ** ADDING/UPDATING LOADERS **
// The "file" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
// When adding a new loader, you must add its `test`
// as a new entry in the `exclude` list for "file" loader.
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
plugins: [
// this provide hot-reload function
new webpack.HotModuleReplacementPlugin(),
// no reload page when any error (optional)
new webpack.NoEmitOnErrorsPlugin(), // webpack.NoErrorsPlugin() is deprecated
// new webpack.optimize.OccurenceOrderPlugin(), it is now enabled by default
new webpack.ProvidePlugin({
turf: '@turf/turf',
_: 'lodash',
}),
],
performance: {
hints: false,
},
// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
devtool: '#eval-source-map',
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
new UglifyJsPlugin({
test: /\.js($|\?)/i,
sourceMap: true,
uglifyOptions: {
mangle: {
keep_fnames: true,
},
compress: {
warnings: false,
},
output: {
beautify: false,
},
},
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
])
}