Issue 1:
Bug report

What is the current behavior?

I created childCompiler at parentCompiler.hook.make stage and I called runAsChild at parentCompiler.hook.emit stage. childCompilation.assets are nothing. I do not see any compilation.

Parent compilation is based on web.webpack.config.js whose target is web. Child compilation is based on another webworker.webpack.config.js whose target is webworker.

If the current behavior is a bug, please provide the steps to reproduce.

web.webpack.config.js

"plugins": [
new WorkboxPlugin(require("./webworker.webpack.config.js")(env, argv))
],
"target": "web"
]

const {DefinePlugin, WebpackOptionsApply, WebpackOptionsDefaulter} = require("webpack");
const NAME = "webworker-injection";

module.exports = class WorkboxPlugin {
constructor(options) {
this.options = new WebpackOptionsDefaulter().process(options);
}

apply(compiler) {
const self = this;
let childCompiler = null;

debugHooks(compiler, NAME);

compiler.hooks.emit.tapAsync(NAME, (compilation, callback) => {
const stats = compilation.getStats().toJson();
new DefinePlugin({
"__PRECACHE_MANIFEST__": JSON.stringify({}),
}).apply(childCompiler);
childCompiler.runAsChild((err, entries, childCompilation) => {
console.log(childCompilation.getStats().toJson()); <<<<<<<<<< this has nothing
callback(err);
})
});

compiler.hooks.make.tapAsync(NAME, (compilation, callback) => {
childCompiler = compilation.createChildCompiler("child", self.options.output);
childCompiler.options = new WebpackOptionsApply().process(self.options, childCompiler);
childCompiler.context = compiler.context;
debugHooks(childCompiler, "child");
callback();
});
}
}

const debugHooks = (target, from) => {
for (let hook in target.hooks) {
if (target.hooks[hook].constructor.name.startsWith("Async")) {
target.hooks[hook].tapAsync(from, (...args) => {
console.log(`${hook}.${from}`);
args[args.length - 1]();
});
} else {
target.hooks[hook].tap(from, () => {
console.log(`${hook}.${from}`);
});
}
}
}

What is the expected behavior?

childCompiler.runAsChild((err, entries, childCompilation) => {
console.log(childCompilation.getStats().toJson()); <<<<<<<<<< this should have something
callback(err);
});

Other relevant information:

webpack version: 4.30

Node.js version: 12.3.1

Operating System: macOS 10.14.5

Additional tools:

Issue 2:
Bug report

What is the current behavior?

I can see a new feature called dependOn is added to webpack which fits in rightly for my requirement. As I moved my webpack version from 4.43.0 to 5.0.0-beta.16, for some reasons the transformation of arrow function in bundle.js is not happening.

If the current behavior is a bug, please provide the steps to reproduce.

Let me share my configurations.

Package.json

`

{
"name": "root",
"private": true,
"workspaces": [
"compositions/*"
],
"dependencies": {
"classnames": "^2.2.6",
"core-js": "3",
"react": "^16.10.2",
"react-dom": "^16.10.2"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@emcm-ui/stylelint-config": "^1.2.2",
"@storybook/react": "^5.3.18",
"babel-core": "7.0.0-bridge.0",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7",
"babel-polyfill": "^6.26.0",
"compression-webpack-plugin": "^3.1.0",
"css-loader": "^3.5.3",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"es6-promise": "^4.2.8",
"eslint": "^6.8.0",
"fs-extra": "^9.0.0",
"isomorphic-fetch": "^2.2.1",
"lerna": "^3.20.2",
"mini-css-extract-plugin": "^0.9.0",
"module": "^1.2.5",
"npm-run-all": "^4.1.5",
"postcss": "^7.0.27",
"postcss-calc": "^7.0.2",
"postcss-css-variables": "^0.17.0",
"prettier": "^1.19.1",
"reduce-css-calc": "^2.1.7",
"regenerator-runtime": "^0.13.5",
"style-loader": "^1.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "5.0.0-beta.16",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.11"
},
"scripts": {
"build": "yarn format && webpack --mode production",
"start": "start-storybook -p 5555",
"npmScript": "webpack --mode production",
"postcss": "node scripts/buildVars.js",
"cleanup": "./cleanup.sh",
"format": "yarn internal:prettier \"./*.{js,jsx,json,md}\" \"./**/*.{js,jsx,json,md}\" --write",
"internal:lint:js": "eslint --ext .js,.jsx --ignore-path .eslintignore",
"internal:prettier": "prettier",
"lint": "npm-run-all lint:*",
"lint:format": "yarn internal:prettier --list-different \"./*.{js,jsx,json,md}\" \"./**/*.{js,jsx,json,md}\"",
"lint:js": "yarn internal:lint:js .",
"lint:js:fix": "yarn internal:lint:js . --fix"
}
}

`

webpack.config.js

`

const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
const webpack = require("webpack");
const getPackages = require("./scripts/getPackages");
const localPackage = require("./package.json");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
entry: {
icons: path.resolve(__dirname, "node_modules", "@emcm-ui/icons")
},
output: {
filename: "[name].js"
},
devServer: {
inline: true,
port: 3002
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "entry",
corejs: { version: 3, proposals: true }
}
],
"@babel/preset-react"
],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-runtime"
]
}
}
},
{
test: /\.css$/,
use: [
// This is executed in reverse order #important
MiniCssExtractPlugin.loader,
// "style-loader",
"css-loader" // this is used to understand the import statement in js for css
]
}
]
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: "static",
generateStatsFile: true,
openAnalyzer: false,
statsOptions: {
source: false
}
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css"
}),
new DuplicatePackageCheckerPlugin()
]
};
`

**polyfill.js**

`
import "regenerator-runtime/runtime";
import "core-js/es";
import "isomorphic-fetch";
import es6Promise from "es6-promise";

es6Promise.polyfill();

`

What is the expected behavior?

I should see my bundle.js transformed into without arrow function in them as most of the browsers cannot read them. The same works when I downgrade my webpack version to 4.43.0

Other relevant information:

webpack version: 5.0.0-beta.16

Node.js version: v12.16.2

Operating System: Windows 32

Additional tools: VSCode

Any help would be appreciated