Skip to content

Commit

Permalink
- [x] Upgrade to webpack 4.8.X
Browse files Browse the repository at this point in the history
- [x] Utilize webpack 4 development and production modes
- [x] Upgrade webpack dev server
- [x] Webpack 4 compatible release of thread-loader
- [x] Webpack 4 compatible release of HtmlWebpackPlugin
- [x] Webpack 4 compatible release of SwPrecacheWebpackPlugin
- [x] Webpack 4 compatible release of WebpackManifestPlugin
- [x] Update README
- [x] Update WebpackDevServerUtils
- [x] Update InterpolateHtmlPlugin
- [x] Update ModuleScopePlugin
- [x] Update WatchMissingNodeModulesPlugin
- [x] Move UglifyJS options to webpack 4 optimize
- [x] Move InterpolateHtmlPlugin to make it tapable on HtmlWebpackPlugin
- [x] vendor splitting via splitChunks.splitChunks (https://twitter.com/wSokra/status/969633336732905474)
- [x] long term caching via splitChunks.runtimeChunk (https://twitter.com/wSokra/status/969679223278505985)
- [x] Make sure process.env.NODE_ENV is proxied correctly to `react-error-overlay`
- [x] Implicit webpack.NamedModulesPlugin in dev config as its default in webpack 4
- [x] Disable webpack performance hints as we have our own filesize reporter
- [x] Replace ExtractTextPlugin with MiniCssExtractPlugin
- [x] Switch to css whole file minification via OptimizeCSSAssetsPlugin rather than per module css minification to gain performance
  • Loading branch information
andriijas committed May 9, 2018
1 parent 9843be5 commit 29486d5
Show file tree
Hide file tree
Showing 16 changed files with 303 additions and 300 deletions.
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@
"precommit": "lint-staged"
},
"devDependencies": {
"eslint": "4.15.0",
"execa": "^0.9.0",
"husky": "^0.13.2",
"lerna": "2.6.0",
"lerna-changelog": "^0.6.0",
"eslint": "4.19.1",
"execa": "^0.10.0",
"husky": "^0.14.3",
"lerna": "2.9.1",
"lerna-changelog": "^0.7.0",
"lint-staged": "^7.0.5",
"meow": "^4.0.0",
"multimatch": "^2.1.0",
"prettier": "1.6.1",
"svg-term-cli": "^2.0.3",
"prettier": "1.12.1",
"svg-term-cli": "^2.1.1",
"tempy": "^0.2.1"
},
"lint-staged": {
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-preset-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"@babel/preset-env": "7.0.0-beta.46",
"@babel/preset-flow": "7.0.0-beta.46",
"@babel/preset-react": "7.0.0-beta.46",
"babel-plugin-macros": "2.0.0",
"babel-plugin-macros": "2.2.0",
"babel-plugin-transform-dynamic-import": "2.0.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.12"
"babel-plugin-transform-react-remove-prop-types": "0.4.13"
}
}
2 changes: 1 addition & 1 deletion packages/confusing-browser-globals/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@
"index.js"
],
"devDependencies": {
"jest": "22.4.1"
"jest": "22.4.3"
}
}
9 changes: 4 additions & 5 deletions packages/react-dev-utils/InterpolateHtmlPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ class InterpolateHtmlPlugin {
}

apply(compiler) {
compiler.plugin('compilation', compilation => {
compilation.plugin(
'html-webpack-plugin-before-html-processing',
(data, callback) => {
compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
'InterpolateHtmlPlugin',
data => {
// Run HTML through a series of user-specified string replacements.
Object.keys(this.replacements).forEach(key => {
const value = this.replacements[key];
Expand All @@ -34,7 +34,6 @@ class InterpolateHtmlPlugin {
value
);
});
callback(null, data);
}
);
});
Expand Down
128 changes: 65 additions & 63 deletions packages/react-dev-utils/ModuleScopePlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,70 +18,72 @@ class ModuleScopePlugin {

apply(resolver) {
const { appSrcs } = this;
resolver.plugin('file', (request, callback) => {
// Unknown issuer, probably webpack internals
if (!request.context.issuer) {
return callback();
}
if (
// If this resolves to a node_module, we don't care what happens next
request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
// Make sure this request was manual
!request.__innerRequest_request
) {
return callback();
}
// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
if (
appSrcs.every(appSrc => {
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in one of our app src or a subdirectory, not our request!
return relative.startsWith('../') || relative.startsWith('..\\');
})
) {
return callback();
}
const requestFullPath = path.resolve(
path.dirname(request.context.issuer),
request.__innerRequest_request
);
if (this.allowedFiles.has(requestFullPath)) {
return callback();
}
// Find path from src to the requested file
// Error if in a parent directory of all given appSrcs
if (
appSrcs.every(appSrc => {
const requestRelative = path.relative(appSrc, requestFullPath);
return (
requestRelative.startsWith('../') ||
requestRelative.startsWith('..\\')
);
})
) {
callback(
new Error(
`You attempted to import ${chalk.cyan(
request.__innerRequest_request
)} which falls outside of the project ${chalk.cyan(
'src/'
)} directory. ` +
`Relative imports outside of ${chalk.cyan(
'src/'
)} are not supported. ` +
`You can either move it inside ${chalk.cyan(
'src/'
)}, or add a symlink to it from project's ${chalk.cyan(
'node_modules/'
)}.`
),
request
resolver.hooks.file.tapAsync(
'ModuleScopePlugin',
(request, contextResolver, callback) => {
// Unknown issuer, probably webpack internals
if (!request.context.issuer) {
return callback();
}
if (
// If this resolves to a node_module, we don't care what happens next
request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
// Make sure this request was manual
!request.__innerRequest_request
) {
return callback();
}
// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
if (
appSrcs.every(appSrc => {
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in one of our app src or a subdirectory, not our request!
return relative.startsWith('../') || relative.startsWith('..\\');
})
) {
return callback();
}
const requestFullPath = path.resolve(
path.dirname(request.context.issuer),
request.__innerRequest_request
);
} else {
callback();
}
if (this.allowedFiles.has(requestFullPath)) {
return callback();
}
// Find path from src to the requested file
// Error if in a parent directory of all given appSrcs
if (
appSrcs.every(appSrc => {
const requestRelative = path.relative(appSrc, requestFullPath);
return (
requestRelative.startsWith('../') ||
requestRelative.startsWith('..\\')
);
})
) {
callback(
new Error(
`You attempted to import ${chalk.cyan(
request.__innerRequest_request
)} which falls outside of the project ${chalk.cyan(
'src/'
)} directory. ` +
`Relative imports outside of ${chalk.cyan(
'src/'
)} are not supported. ` +
`You can either move it inside ${chalk.cyan(
'src/'
)}, or add a symlink to it from project's ${chalk.cyan(
'node_modules/'
)}.`
),
request
);
} else {
callback();
}
});
}
}
Expand Down
14 changes: 7 additions & 7 deletions packages/react-dev-utils/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,18 @@ module.exports = {
},
// ...
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: path.resolve('public/index.html'),
}),
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
// You can pass any key-value pairs, this was just an example.
// WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
}),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: path.resolve('public/index.html'),
}),
// ...
],
// ...
Expand Down Expand Up @@ -198,11 +198,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

var compiler = webpack(config);

compiler.plugin('invalid', function() {
compiler.hooks.invalid.tap('invalid', function() {
console.log('Compiling...');
});

compiler.plugin('done', function(stats) {
compiler.hooks.done.tap('done', function(stats) {
var rawMessages = stats.toJson({}, true);
var messages = formatWebpackMessages(rawMessages);
if (!messages.errors.length && !messages.warnings.length) {
Expand Down
10 changes: 4 additions & 6 deletions packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,15 @@ class WatchMissingNodeModulesPlugin {
}

apply(compiler) {
compiler.plugin('emit', (compilation, callback) => {
var missingDeps = compilation.missingDependencies;
compiler.hooks.emit.tap('WatchMissingNodeModulesPlugin', compilation => {
var missingDeps = Array.from(compilation.missingDependencies);
var nodeModulesPath = this.nodeModulesPath;

// If any missing files are expected to appear in node_modules...
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
if (missingDeps.some(file => file.includes(nodeModulesPath))) {
// ...tell webpack to watch node_modules recursively until they appear.
compilation.contextDependencies.push(nodeModulesPath);
compilation.contextDependencies.add(nodeModulesPath);
}

callback();
});
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-dev-utils/WebpackDevServerUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
// recompiling a bundle. WebpackDevServer takes care to pause serving the
// bundle, so if you refresh, it'll wait instead of serving the old one.
// "invalid" is short for "bundle invalidated", it doesn't imply any errors.
compiler.plugin('invalid', () => {
compiler.hooks.invalid.tap('invalid', () => {
if (isInteractive) {
clearConsole();
}
Expand All @@ -142,7 +142,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {

// "done" event fires when Webpack has finished recompiling the bundle.
// Whether or not you have warnings or errors, you will get this event.
compiler.plugin('done', stats => {
compiler.hooks.done.tap('done', stats => {
if (isInteractive) {
clearConsole();
}
Expand Down
18 changes: 9 additions & 9 deletions packages/react-dev-utils/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,29 +40,29 @@
"dependencies": {
"@babel/code-frame": "7.0.0-beta.46",
"address": "1.0.3",
"browserslist": "2.11.3",
"chalk": "2.3.0",
"cross-spawn": "5.1.0",
"browserslist": "3.2.6",
"chalk": "2.4.1",
"cross-spawn": "6.0.5",
"detect-port-alt": "1.1.6",
"escape-string-regexp": "1.0.5",
"filesize": "3.5.11",
"filesize": "3.6.1",
"find-pkg": "1.0.0",
"global-modules": "1.0.0",
"globby": "7.1.1",
"globby": "8.0.1",
"gzip-size": "4.1.0",
"inquirer": "5.0.0",
"inquirer": "5.1.0",
"is-root": "1.0.0",
"opn": "5.2.0",
"opn": "5.3.0",
"pkg-up": "2.0.0",
"react-error-overlay": "^4.0.0",
"recursive-readdir": "2.2.1",
"recursive-readdir": "2.2.2",
"shell-quote": "1.6.1",
"sockjs-client": "1.1.4",
"strip-ansi": "4.0.0",
"text-table": "0.2.0"
},
"devDependencies": {
"jest": "22.4.1"
"jest": "22.4.3"
},
"scripts": {
"test": "jest"
Expand Down
27 changes: 14 additions & 13 deletions packages/react-error-overlay/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,31 +36,32 @@
"anser": "1.4.6",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^22.4.1",
"babel-jest": "^22.4.3",
"babel-loader": "^8.0.0-beta.0",
"babel-preset-react-app": "^3.1.1",
"chalk": "^2.1.0",
"chokidar": "^2.0.0",
"cross-env": "5.1.3",
"eslint": "4.15.0",
"chalk": "^2.3.2",
"chokidar": "^2.0.2",
"cross-env": "5.1.4",
"eslint": "4.19.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "2.41.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-flowtype": "2.46.1",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"flow-bin": "^0.63.1",
"html-entities": "1.2.1",
"jest": "22.4.1",
"jest-fetch-mock": "1.2.1",
"jest": "22.4.3",
"jest-fetch-mock": "1.5.0",
"object-assign": "4.1.1",
"promise": "8.0.1",
"raw-loader": "^0.5.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"rimraf": "^2.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"rimraf": "^2.6.2",
"settle-promise": "1.0.0",
"source-map": "0.5.6",
"webpack": "^3.6.0"
"uglifyjs-webpack-plugin": "1.2.5",
"webpack": "^4.8.1"
},
"jest": {
"setupFiles": [
Expand Down
Loading

0 comments on commit 29486d5

Please sign in to comment.