forked from openath/openath.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
174 lines (157 loc) · 5.06 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
168
169
170
171
172
173
174
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var pkg = require('./package.json');
var isDebug = process.env.NODE_ENV !== 'production';
var mode = `mode: ${isDebug ? "'debug'" : "'production'"}`;
console.log(
`\n+${'-'.repeat(mode.length + 2)}+\n| ${mode} |\n+${'-'.repeat(
mode.length + 2
)}+\n`
);
var config = {
// Compile for usage in a browser-like environment
// https://webpack.js.org/configuration/target/
target: 'web',
// Entry points for our main js file
// https://webpack.js.org/configuration/entry-context/#entry
entry: './__src/entry.js',
// How and where it should output our bundles
// https://webpack.js.org/configuration/output/
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js?[hash]'
},
optimization: {
minimize: true
},
module: {
rules: [{
test: /\.jsx?$/,
// Babel Loader
// https://github.com/babel/babel-loader
loader: 'babel-loader',
query: {
// Will be used to cache the results of the loader.
// Future webpack builds will attempt to read from the cache.
cacheDirectory: isDebug
}
}, {
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
use: [{
// CSS Loader
// https://github.com/webpack/css-loader
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: isDebug,
// CSS Nano http://cssnano.co/options/
minimize: !isDebug
}
}, {
// PostCSS Loader
// https://github.com/postcss/postcss-loader
loader: 'postcss-loader',
options: {
sourceMap: isDebug,
plugins: [
// Used to resolve imports
// https://github.com/postcss/postcss-import
postcssImport(),
// Add vendor prefixes to CSS rules using values from caniuse.com
// https://github.com/postcss/autoprefixer
autoprefixer()
]
}
}, {
// SASS Loader
// https://github.com/webpack-contrib/sass-loader
loader: 'sass-loader',
options: {
sourceMap: isDebug,
includePaths: ["node_modules"]
}
}]
})
}, {
test: /\.(jpg|jpeg|gif|png|svg)$/,
// File loader
// https://github.com/webpack-contrib/file-loader
loader: 'file-loader',
options: {
//emitFile: false,
name: '[name].[ext]?[hash]',
publicPath: '/dist/img/',
outputPath: 'img/'
}
}, {
test: /\.(woff|woff2)$/,
// File loader
// https://github.com/webpack-contrib/file-loader
loader: 'file-loader',
options: {
//emitFile: false,
name: '[name].[ext]?[hash]',
publicPath: '/dist/fonts/',
outputPath: 'fonts/'
}
}]
},
// Don't attempt to continue if there are any errors.
// https://webpack.js.org/configuration/other-options/#bail
bail: !isDebug,
// Cache the generated webpack modules and chunks to improve build speed
// https://webpack.js.org/configuration/other-options/#cache
cache: isDebug,
// Precise control of what bundle information gets displayed
// https://webpack.js.org/configuration/stats/
stats: isDebug ? 'normal' : 'minimal',
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
__DEV__: isDebug,
__VERSION__: JSON.stringify(`${pkg.version}`),
}),
// Extract webpack css into its own file
// https://webpack.js.org/plugins/extract-text-webpack-plugin/
new ExtractTextPlugin({
filename: '[name].css?[hash]',
allChunks: true,
}),
/*
...(isDebug ? [] : [
// Minimize all JavaScript output of chunks
// https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
new webpack.optimize.UglifyJsPlugin(),
]),
*/
// Adds a banner to the top of each generated chunk
// https://webpack.js.org/plugins/banner-plugin/
new webpack.BannerPlugin({
banner: `banner ${pkg.version} - ${new Date()} - 🦆`,
}),
],
// Choose a developer tool to enhance debugging
// https://webpack.js.org/configuration/devtool/
devtool: isDebug ? 'inline-source-map' : false,
// These options change how modules are resolved. webpack provides reasonable defaults
// https://webpack.js.org/configuration/resolve/
resolve: {
// So we can avoid `.jsx` & `.js` when importing files
extensions: ['.js', '.jsx', '.json', '.scss'],
},
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
// https://webpack.github.io/docs/configuration.html#node
// https://github.com/webpack/node-libs-browser/tree/master/mock
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
module.exports = config;