-
Notifications
You must be signed in to change notification settings - Fork 33
/
webpack.dev.config.js
184 lines (178 loc) · 6.25 KB
/
webpack.dev.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
// This is the dev Webpack config. All settings here should prefer a fast build
// time at the expense of creating larger, unoptimized bundles.
const { merge } = require('webpack-merge');
const Dotenv = require('dotenv-webpack');
const dotenv = require('dotenv');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const PostCssAutoprefixerPlugin = require('autoprefixer');
const PostCssRTLCSS = require('postcss-rtlcss');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const commonConfig = require('./webpack.common.config');
const presets = require('../lib/presets');
const resolvePrivateEnvConfig = require('../lib/resolvePrivateEnvConfig');
const getLocalAliases = require('./getLocalAliases');
// Add process env vars. Currently used only for setting the
// server port and the publicPath
dotenv.config({
path: path.resolve(process.cwd(), '.env.development'),
});
// Allow private/local overrides of env vars from .env.development for config settings
// that you'd like to persist locally during development, without the risk of checking
// in temporary modifications to .env.development.
resolvePrivateEnvConfig('.env.private');
const aliases = getLocalAliases();
const PUBLIC_PATH = process.env.PUBLIC_PATH || '/';
module.exports = merge(commonConfig, {
mode: 'development',
devtool: 'eval-source-map',
output: {
publicPath: PUBLIC_PATH,
},
resolve: {
alias: aliases,
},
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)$/,
exclude: /node_modules\/(?!@edx)/,
use: {
loader: 'babel-loader',
options: {
configFile: presets.babel.resolvedFilepath,
// Caches result of loader to the filesystem. Future builds will attempt to read
// from the cache to avoid needing to run the expensive recompilation process
// on each run.
cacheDirectory: true,
plugins: [
require.resolve('react-refresh/babel'),
],
},
},
},
// We are not extracting CSS from the javascript bundles in development because extracting
// prevents hot-reloading from working, it increases build time, and we don't care about
// flash-of-unstyled-content issues in development.
{
test: /(.scss|.css)$/,
use: [
'style-loader', // creates style nodes from JS strings
{
loader: 'css-loader', // translates CSS into CommonJS
options: {
sourceMap: true,
modules: {
compileType: 'icss',
},
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
PostCssAutoprefixerPlugin(),
PostCssRTLCSS(),
],
},
},
},
'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'),
],
},
},
},
],
},
{
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+)?$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65,
},
gifsicle: {
interlaced: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4,
},
},
},
],
},
],
},
// Specify additional processing or side-effects done on the Webpack output bundles as a whole.
plugins: [
// 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'),
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.development'),
systemvars: true,
}),
new ReactRefreshWebpackPlugin(),
],
// This configures webpack-dev-server which serves bundles from memory and provides live
// reloading.
devServer: {
host: '0.0.0.0',
port: process.env.PORT || 8080,
historyApiFallback: {
index: path.join(PUBLIC_PATH, 'index.html'),
},
// Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
webSocketServer: 'ws',
devMiddleware: {
publicPath: PUBLIC_PATH,
},
},
});