Skip to content

Commit

Permalink
- [x] Upgrade to webpack 4.1.0
Browse files Browse the repository at this point in the history
- [x] Use new webpack 4 development and production modes
- [x] Upgrade webpack dev server
- [x] webpack 4 compatible release of thread-loader
- [x] Upgrade to webpack 4 compatible release of HtmlWebpackPlugin
- [x] Beta release of ExtractTextPlugin compatible plugin
- [x] Pre-release of SwPrecacheWebpackPlugin compatible plugin
- [x] Pre-release of WebpackManifestPLugin compatible plugin
- [x] allChunks on ExtractTextPlugin
fixes #3086 #2415

prior discussion #408

more details of this behavior webpack/webpack#673
- [x] Update README
- [x] Update WebpackDevServerUtils
- [x] Update InterpolateHtmlPlugin
- [x] Update ModuleScopePlugin
- [x] Update WatchMissingNodeModulesPlugin
- [x] Move UglifyJS options to webpack 4 optimize
- [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`
  • Loading branch information
andriijas committed Mar 6, 2018
1 parent 65e0621 commit 20e31b0
Show file tree
Hide file tree
Showing 17 changed files with 264 additions and 214 deletions.
17 changes: 9 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,20 @@
"screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
"test": "cd packages/react-scripts && node bin/react-scripts.js test --env=jsdom",
"format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
"precommit": "lint-staged"
"precommit": "lint-staged",
"webpack-defaults": "webpack-defaults"
},
"devDependencies": {
"eslint": "4.15.0",
"eslint": "4.18.2",
"execa": "^0.9.0",
"husky": "^0.13.2",
"lerna": "2.6.0",
"lerna-changelog": "^0.6.0",
"lint-staged": "^3.3.1",
"husky": "^0.14.3",
"lerna": "2.9.0",
"lerna-changelog": "^0.7.0",
"lint-staged": "^7.0.0",
"meow": "^4.0.0",
"multimatch": "^2.1.0",
"prettier": "1.6.1",
"svg-term-cli": "^2.0.3",
"prettier": "1.11.1",
"svg-term-cli": "^2.1.1",
"tempy": "^0.2.1"
},
"lint-staged": {
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-named-asset-import/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
"index.js"
],
"peerDependencies": {
"@babel/core": "7.0.0-beta.38"
"@babel/core": "7.0.0-beta.40"
}
}
30 changes: 15 additions & 15 deletions packages/babel-preset-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@
"dependencies.js"
],
"dependencies": {
"@babel/core": "7.0.0-beta.38",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.38",
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.38",
"@babel/plugin-transform-classes": "7.0.0-beta.38",
"@babel/plugin-transform-destructuring": "7.0.0-beta.38",
"@babel/plugin-transform-react-constant-elements": "7.0.0-beta.38",
"@babel/plugin-transform-react-display-name": "7.0.0-beta.38",
"@babel/plugin-transform-react-jsx": "7.0.0-beta.38",
"@babel/plugin-transform-regenerator": "7.0.0-beta.38",
"@babel/plugin-transform-runtime": "7.0.0-beta.38",
"@babel/preset-env": "7.0.0-beta.38",
"@babel/preset-flow": "7.0.0-beta.38",
"@babel/preset-react": "7.0.0-beta.38",
"babel-plugin-macros": "2.0.0",
"@babel/core": "7.0.0-beta.40",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.40",
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.40",
"@babel/plugin-transform-classes": "7.0.0-beta.40",
"@babel/plugin-transform-destructuring": "7.0.0-beta.40",
"@babel/plugin-transform-react-constant-elements": "7.0.0-beta.40",
"@babel/plugin-transform-react-display-name": "7.0.0-beta.40",
"@babel/plugin-transform-react-jsx": "7.0.0-beta.40",
"@babel/plugin-transform-regenerator": "7.0.0-beta.40",
"@babel/plugin-transform-runtime": "7.0.0-beta.40",
"@babel/preset-env": "7.0.0-beta.40",
"@babel/preset-flow": "7.0.0-beta.40",
"@babel/preset-react": "7.0.0-beta.40",
"babel-plugin-macros": "2.1.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.1.2"
"jest": "22.4.2"
}
}
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
113 changes: 58 additions & 55 deletions packages/react-dev-utils/ModuleScopePlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,63 +18,66 @@ class ModuleScopePlugin {

apply(resolver) {
const { appSrc } = 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?
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
if (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 src/
const requestRelative = path.relative(appSrc, requestFullPath);
if (
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?
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
if (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 src/
const requestRelative = path.relative(appSrc, requestFullPath);
if (
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 @@ -37,31 +37,31 @@
"workspaceUtils.js"
],
"dependencies": {
"@babel/code-frame": "7.0.0-beta.38",
"@babel/code-frame": "7.0.0-beta.40",
"address": "1.0.3",
"browserslist": "2.11.3",
"chalk": "2.3.0",
"cross-spawn": "5.1.0",
"browserslist": "3.1.1",
"chalk": "2.3.1",
"cross-spawn": "6.0.4",
"detect-port-alt": "1.1.5",
"escape-string-regexp": "1.0.5",
"filesize": "3.5.11",
"filesize": "3.6.0",
"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",
"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.1.2"
"jest": "22.4.2"
},
"scripts": {
"test": "jest"
Expand Down
Loading

0 comments on commit 20e31b0

Please sign in to comment.