Skip to content

Commit

Permalink
- [x] Upgrade to webpack 4.8.X (#4077)
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 authored and gaearon committed May 20, 2018
1 parent 493a379 commit d72678f
Show file tree
Hide file tree
Showing 17 changed files with 304 additions and 301 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
2 changes: 1 addition & 1 deletion packages/babel-preset-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,6 @@
"@babel/preset-react": "7.0.0-beta.46",
"babel-plugin-macros": "2.2.1",
"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"
}
}
2 changes: 1 addition & 1 deletion packages/eslint-config-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.7.0"
"eslint-plugin-react": "^7.8.2"
},
"dependencies": {
"confusing-browser-globals": "^1.0.0"
Expand Down
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
);
});

This comment has been minimized.

Copy link
@romanlex

romanlex Jun 9, 2018

Could you please update next version of package in npm?
https://www.npmjs.com/package/react-dev-utils
Old version has InterpolateHtmlPlugin wich doesn't support webpack 4 hooks

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
29 changes: 15 additions & 14 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",
"eslint-plugin-react": "7.8.2",
"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

1 comment on commit d72678f

@lflpowell
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are PostCSS source maps intended for production only?

Please sign in to comment.