Skip to content

Commit 5373cd1

Browse files
halfzebrahalfzebra
committed
fix(webpack.config.dev): remove dead configuration, enable chunk splitting for vendor stuff.
1 parent 8abe688 commit 5373cd1

File tree

1 file changed

+145
-112
lines changed

1 file changed

+145
-112
lines changed

‎config/webpack.config.dev.js

Lines changed: 145 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
const autoprefixer = require('autoprefixer');
44
const path = require('path');
55
const webpack = require('webpack');
6+
const HtmlWebpackPlugin = require('html-webpack-plugin');
67
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
78
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
8-
const HtmlWebpackPlugin = require('html-webpack-plugin');
99
const getClientEnvironment = require('./env');
1010
const paths = require('../config/paths');
1111

@@ -66,14 +66,9 @@ module.exports = {
6666

6767
paths.appIndexJs
6868
],
69-
7069
output: {
7170
// Add /* filename */ comments to generated require()s in the output.
7271
pathinfo: true,
73-
74-
// The build folder.
75-
path: paths.appBuild,
76-
7772
// This does not produce a real file. It's just the virtual path that is
7873
// served by WebpackDevServer in development. This is the JS bundle
7974
// containing code from all our entry points, and the Webpack runtime.
@@ -82,16 +77,17 @@ module.exports = {
8277
chunkFilename: 'static/js/[name].chunk.js',
8378
// This is the URL that app is served from. We use "/" in development.
8479
publicPath: publicPath,
85-
8680
// Point sourcemap entries to original disk location (format as URL on Windows)
8781
devtoolModuleFilenameTemplate: info =>
8882
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
8983
},
9084
optimization: {
9185
// Automatically split vendor and commons
9286
// https://twitter.com/wSokra/status/969633336732905474
87+
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
9388
splitChunks: {
94-
chunks: 'all'
89+
chunks: 'all',
90+
name: 'vendors'
9591
},
9692
// Keep the runtime chunk seperated to enable long term caching
9793
// https://twitter.com/wSokra/status/969679223278505985
@@ -106,117 +102,155 @@ module.exports = {
106102

107103
strictExportPresence: true,
108104
rules: [
105+
// Disable require.ensure as it's not a standard language feature.
106+
{ parser: { requireEnsure: false } },
107+
109108
{
110-
test: /\.js$/,
111-
exclude: [/elm-stuff/, /node_modules/],
112-
loader: require.resolve('babel-loader'),
113-
query: {
114-
// Latest stable ECMAScript features
115-
presets: [
116-
[
117-
require.resolve('babel-preset-env'),
109+
// "oneOf" will traverse all following loaders until one will
110+
// match the requirements. When no loader matches it will fall
111+
// back to the "file" loader at the end of the loader list.
112+
oneOf: [
113+
// "url" loader works like "file" loader except that it embeds assets
114+
// smaller than specified limit in bytes as data URLs to avoid requests.
115+
// A missing `test` is equivalent to a match.
116+
{
117+
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
118+
loader: require.resolve('url-loader'),
119+
options: {
120+
limit: 10000,
121+
name: 'static/media/[name].[hash:8].[ext]'
122+
}
123+
},
124+
125+
{
126+
test: /\.js$/,
127+
exclude: [/elm-stuff/, /node_modules/],
128+
loader: require.resolve('babel-loader'),
129+
query: {
130+
// Latest stable ECMAScript features
131+
presets: [
132+
[
133+
require.resolve('babel-preset-env'),
134+
{
135+
targets: {
136+
// React parses on ie 9, so we should too
137+
ie: 9,
138+
// We currently minify with uglify
139+
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
140+
uglify: true
141+
},
142+
// Disable polyfill transforms
143+
useBuiltIns: false,
144+
// Do not transform modules to CJS
145+
modules: false
146+
}
147+
]
148+
],
149+
plugins: [
150+
require.resolve(
151+
'babel-plugin-transform-custom-element-classes'
152+
),
153+
[
154+
require.resolve('babel-plugin-transform-runtime'),
155+
{
156+
helpers: false,
157+
polyfill: false,
158+
regenerator: true
159+
}
160+
]
161+
]
162+
}
163+
},
164+
// Process any JS outside of the app with Babel.
165+
// Unlike the application JS, we only compile the standard ES features.
166+
{
167+
test: /\.js$/,
168+
use: [
118169
{
119-
targets: {
120-
// React parses on ie 9, so we should too
121-
ie: 9,
122-
// We currently minify with uglify
123-
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
124-
uglify: true
125-
},
126-
// Disable polyfill transforms
127-
useBuiltIns: false,
128-
// Do not transform modules to CJS
129-
modules: false
170+
loader: require.resolve('babel-loader'),
171+
options: {
172+
babelrc: false,
173+
compact: false,
174+
presets: [require.resolve('babel-preset-env')],
175+
cacheDirectory: true,
176+
highlightCode: true
177+
}
130178
}
131179
]
132-
],
133-
plugins: [
134-
[
135-
require.resolve('babel-plugin-transform-runtime'),
180+
},
181+
// "postcss" loader applies autoprefixer to our CSS.
182+
// "css" loader resolves paths in CSS and adds assets as dependencies.
183+
// "style" loader turns CSS into JS modules that inject <style> tags.
184+
// In production, we use a plugin to extract that CSS to a file, but
185+
// in development "style" loader enables hot editing of CSS.
186+
// By default we support CSS Modules with the extension .module.css
187+
{
188+
test: /\.css$/,
189+
exclude: /\.module\.css$/,
190+
use: [
191+
require.resolve('style-loader'),
192+
{
193+
loader: require.resolve('css-loader'),
194+
options: {
195+
importLoaders: 1
196+
}
197+
},
136198
{
137-
helpers: false,
138-
polyfill: false,
139-
regenerator: true
199+
loader: require.resolve('postcss-loader'),
200+
options: postCSSLoaderOptions
140201
}
141202
]
142-
]
143-
}
144-
},
145-
146-
{
147-
test: /\.elm$/,
148-
exclude: [/elm-stuff/, /node_modules/],
149-
use: [
150-
{
151-
loader: require.resolve('elm-hot-loader')
152203
},
153-
// string-replace-loader works as InterpolateHtmlPlugin for Elm,
154-
// it replaces all of the %PUBLIC_URL% with the URL of your
155-
// application, so you could serve static assets outside of the
156-
// module system.
157204
{
158-
loader: require.resolve('string-replace-loader'),
159-
query: {
160-
search: '%PUBLIC_URL%',
161-
replace: publicUrl,
162-
flags: 'g'
163-
}
205+
test: /\.elm$/,
206+
exclude: [/elm-stuff/, /node_modules/],
207+
use: [
208+
{
209+
loader: require.resolve('elm-hot-loader')
210+
},
211+
// string-replace-loader works as InterpolateHtmlPlugin for Elm,
212+
// it replaces all of the %PUBLIC_URL% with the URL of your
213+
// application, so you could serve static assets outside of the
214+
// module system.
215+
{
216+
loader: require.resolve('string-replace-loader'),
217+
query: {
218+
search: '%PUBLIC_URL%',
219+
replace: publicUrl,
220+
flags: 'g'
221+
}
222+
},
223+
{
224+
loader: require.resolve('elm-webpack-loader'),
225+
options: {
226+
verbose: true,
227+
warn: true,
228+
// If ELM_DEBUGGER was set to "false", disable it. Otherwise
229+
// for invalid values, "true" and as a default, enable it
230+
debug: process.env.ELM_DEBUGGER === 'false' ? false : true,
231+
pathToMake: paths.elmMake,
232+
forceWatch: true
233+
}
234+
}
235+
]
164236
},
237+
// "file" loader makes sure those assets get served by WebpackDevServer.
238+
// When you `import` an asset, you get its (virtual) filename.
239+
// In production, they would get copied to the `build` folder.
240+
// This loader doesn't use a "test" so it will catch all modules
241+
// that fall through the other loaders.
165242
{
166-
loader: require.resolve('elm-webpack-loader'),
243+
// Exclude `js` files to keep "css" loader working as it injects
244+
// its runtime that would otherwise be processed through "file" loader.
245+
// Also exclude `html` and `json` extensions so they get processed
246+
// by webpacks internal loaders.
247+
exclude: [/\.(js|elm)$/, /\.html$/, /\.json$/],
248+
loader: require.resolve('file-loader'),
167249
options: {
168-
verbose: true,
169-
warn: true,
170-
// If ELM_DEBUGGER was set to "false", disable it. Otherwise
171-
// for invalid values, "true" and as a default, enable it
172-
debug: process.env.ELM_DEBUGGER === 'false' ? false : true,
173-
pathToMake: paths.elmMake,
174-
forceWatch: true
250+
name: 'static/media/[name].[hash:8].[ext]'
175251
}
176252
}
177253
]
178-
},
179-
180-
// "postcss" loader applies autoprefixer to our CSS.
181-
// "css" loader resolves paths in CSS and adds assets as dependencies.
182-
// "style" loader turns CSS into JS modules that inject <style> tags.
183-
// In production, we use a plugin to extract that CSS to a file, but
184-
// in development "style" loader enables hot editing of CSS.
185-
// By default we support CSS Modules with the extension .module.css
186-
{
187-
test: /\.css$/,
188-
exclude: /\.module\.css$/,
189-
use: [
190-
require.resolve('style-loader'),
191-
{
192-
loader: require.resolve('css-loader'),
193-
options: {
194-
importLoaders: 1
195-
}
196-
},
197-
{
198-
loader: require.resolve('postcss-loader'),
199-
options: postCSSLoaderOptions
200-
}
201-
]
202-
},
203-
204-
{
205-
exclude: [/\.html$/, /\.js$/, /\.elm$/, /\.css$/, /\.json$/, /\.svg$/],
206-
loader: require.resolve('url-loader'),
207-
options: {
208-
limit: 10000,
209-
name: 'static/media/[name].[hash:8].[ext]'
210-
}
211-
},
212-
213-
// "file" loader for svg
214-
{
215-
test: /\.svg$/,
216-
loader: require.resolve('file-loader'),
217-
options: {
218-
name: 'static/media/[name].[hash:8].[ext]'
219-
}
220254
}
221255
]
222256
},
@@ -231,8 +265,10 @@ module.exports = {
231265
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
232266
// In development, this will be an empty string.
233267
new InterpolateHtmlPlugin(env.raw),
234-
// Add module names to factory functions so they appear in browser profiler.
235-
new webpack.NamedModulesPlugin(),
268+
// Makes some environment variables available to the JS code, for example:
269+
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
270+
new webpack.DefinePlugin(env.stringified),
271+
// This is necessary to emit hot updates (currently CSS only):
236272
new webpack.HotModuleReplacementPlugin(),
237273
// Watcher doesn't work well if you mistype casing in a path so we use
238274
// a plugin that prints an error when you attempt to do this.
@@ -249,10 +285,7 @@ module.exports = {
249285
tls: 'empty',
250286
child_process: 'empty'
251287
},
252-
// Turn off performance hints during development because we don't do any
253-
// splitting or minification in interest of speed. These warnings become
254-
// cumbersome.
255-
performance: {
256-
hints: false
257-
}
288+
// Turn off performance processing because we utilize
289+
// our own hints via the FileSizeReporter
290+
performance: false
258291
};

0 commit comments

Comments
 (0)