forked from openedx-unsupported/edx-analytics-dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebpack.prod.config.js
95 lines (92 loc) · 4.14 KB
/
webpack.prod.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
// Bundles static assets for loading in production environments.
// Optimizes for small resulting bundle size at the expense of a long build time.
var Merge = require('webpack-merge'),
path = require('path'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
extractCSS = new ExtractTextPlugin('styles-css.css'),
extractSCSS = new ExtractTextPlugin('styles-scss.css'),
commonConfig = require('./webpack.common.config.js');
module.exports = Merge.smart(commonConfig, {
module: {
// Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
rules: [
// The babel-loader transforms newer ES2015 syntax to older ES5 for legacy browsers.
// The 'transform-runtime' plugin tells babel to require the runtime instead of inlining it (saves bundle
// size).
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'ie >= 11']
}
}]
],
plugins: ['transform-runtime', 'babel-plugin-syntax-dynamic-import']
}
}
},
// Webpack, by default, includes all CSS in the javascript bundles. Unfortunately, that means:
// a) The CSS won't be cached by browsers separately (a javascript change will force CSS re-download)
// b) Since CSS is applied asyncronously, it causes an ugly flash-of-unstyled-content.
//
// To avoid these problems, we extract the CSS from the bundles into separate CSS files that can be included
// as <link> tags in the HTML <head> manually by our Django tempaltes.
//
// We will not do this in development because it prevents hot-reloading from working and it increases build
// time.
{
test: /\.scss$/,
use: extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', // creates the style nodes from JS strings
options: {
minimize: true,
sourceMap: true
}
},
// fast-sass-loader might be slightly faster, but lacks useful source-map generation
{
loader: 'sass-loader', // compiles Sass to CSS.
options: {
minimize: true,
sourceMap: true
}
}
]
}),
exclude: /node_modules/
},
// Not all of our dependencies use Sass. We need an additional rule for requiring or including CSS files.
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
minimize: true,
sourceMap: true
}
}
}),
include: [path.join(__dirname, 'analytics_dashboard/static'), path.join(__dirname, 'node_modules')]
}
]
},
// Specify additional processing or side-effects done on the Webpack output bundles as a whole.
plugins: [
extractCSS,
extractSCSS,
new webpack.optimize.UglifyJsPlugin({sourceMap: true}) // aka. minify
],
// Source-map generation method. 'source-map' is the slowest, but also the highest quality.
devtool: 'source-map'
});