-
Notifications
You must be signed in to change notification settings - Fork 33
/
webpack.prod.config.js
220 lines (214 loc) · 7.92 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
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
// This is the prod Webpack config. All settings here should prefer smaller,
// optimized bundles at the expense of a longer build time.
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { merge } = require('webpack-merge');
const CssNano = require('cssnano');
const Dotenv = require('dotenv-webpack');
const dotenv = require('dotenv');
const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const PostCssAutoprefixerPlugin = require('autoprefixer');
const PostCssRTLCSS = require('postcss-rtlcss');
const PostCssCustomMediaCSS = require('postcss-custom-media');
// Reduce CSS file size by ~70%
const purgecss = require('@fullhuman/postcss-purgecss');
const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
const commonConfig = require('./webpack.common.config');
const presets = require('../lib/presets');
// Add process env vars. Currently used only for setting the PUBLIC_PATH.
dotenv.config({
path: path.resolve(process.cwd(), '.env'),
});
const extraPostCssPlugins = [];
if (process.env.USE_PURGECSS) { // If USE_PURGECSS is set we append it.
extraPostCssPlugins.push(purgecss({
content: ['./**/*.html', './**/*.js', './**/*.jsx', './**/*.ts', './**/*.tsx'],
}));
}
const extraPlugins = [];
if (process.env.ENABLE_NEW_RELIC !== 'false') {
// Enable NewRelic logging only if the account ID is properly defined
extraPlugins.push(new HtmlWebpackNewRelicPlugin({
// This plugin fixes an issue where the newrelic script will break if
// not added directly to the HTML.
// We use non empty strings as defaults here to prevent errors for empty configs
accountID: process.env.NEW_RELIC_ACCOUNT_ID || 'undefined_account_id',
agentID: process.env.NEW_RELIC_AGENT_ID || 'undefined_agent_id',
trustKey: process.env.NEW_RELIC_TRUST_KEY || 'undefined_trust_key',
licenseKey: process.env.NEW_RELIC_LICENSE_KEY || 'undefined_license_key',
applicationID: process.env.NEW_RELIC_APP_ID || 'undefined_application_id',
}));
extraPlugins.push(new NewRelicSourceMapPlugin({
applicationId: process.env.NEW_RELIC_APP_ID,
apiKey: process.env.NEW_RELIC_ADMIN_KEY,
staticAssetUrl: process.env.BASE_URL,
// upload source maps in prod builds only
noop: typeof process.env.NEW_RELIC_ADMIN_KEY === 'undefined',
}));
}
module.exports = merge(commonConfig, {
mode: 'production',
devtool: 'source-map',
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(process.cwd(), 'dist'),
publicPath: process.env.PUBLIC_PATH || '/',
},
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 older browsers.
// Babel is configured with the .babelrc file at the root of the project.
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules\/(?!@(open)?edx)/,
use: {
loader: 'babel-loader',
options: {
configFile: presets['babel-typescript'].resolvedFilepath,
},
},
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
// 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.
//
// We will not do this in development because it prevents hot-reloading from working and it
// increases build time.
{
test: /(.scss|.css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader', // translates CSS into CommonJS
options: {
sourceMap: true,
modules: {
compileType: 'icss',
},
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
PostCssAutoprefixerPlugin(),
PostCssRTLCSS(),
PostCssCustomMediaCSS(),
CssNano(),
...extraPostCssPlugins,
],
},
},
},
'resolve-url-loader',
{
loader: 'sass-loader', // compiles Sass to CSS
options: {
sourceMap: true,
sassOptions: {
includePaths: [
path.join(process.cwd(), 'node_modules'),
path.join(process.cwd(), 'src'),
],
// silences compiler warnings regarding deprecation warnings
quietDeps: true,
},
},
},
],
},
{
test: /.svg(\?v=\d+\.\d+\.\d+)?$/,
issuer: /\.jsx?$/,
use: ['@svgr/webpack'],
},
// Webpack, by default, uses the url-loader for images and fonts that are required/included by
// files it processes, which just base64 encodes them and inlines them in the javascript
// bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
// file-loader instead to copy the files directly to the output directory.
{
test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
},
{
test: /favicon.ico$/,
loader: 'file-loader',
options: {
name: '[name].[ext]', // <-- retain original file name
},
},
{
test: /\.(jpe?g|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
},
],
},
// New in Webpack 4. Replaces CommonChunksPlugin. Extract common modules among all chunks to one
// common chunk and extract the Webpack runtime to a single runtime chunk.
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
},
minimizer: [
'...',
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.sharpMinify,
options: {
encodeOptions: {
...['png', 'jpeg', 'jpg'].reduce((accumulator, value) => (
{ ...accumulator, [value]: { progressive: true, quality: 65 } }
), {}),
gif: {
effort: 5,
},
},
},
},
}),
],
},
// Specify additional processing or side-effects done on the Webpack output bundles as a whole.
plugins: [
// Cleans the dist directory before each build
new CleanWebpackPlugin(),
// Writes the extracted CSS from each entry to a file in the output directory.
new MiniCssExtractPlugin({
filename: '[name].[chunkhash].css',
}),
// Generates an HTML file in the output directory.
new HtmlWebpackPlugin({
inject: true, // Appends script tags linking to the webpack bundles at the end of the body
template: path.resolve(process.cwd(), 'public/index.html'),
chunks: ['app'],
FAVICON_URL: process.env.FAVICON_URL || null,
OPTIMIZELY_PROJECT_ID: process.env.OPTIMIZELY_PROJECT_ID || null,
NODE_ENV: process.env.NODE_ENV || null,
}),
new Dotenv({
path: path.resolve(process.cwd(), '.env'),
systemvars: true,
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
...extraPlugins,
],
});