Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: require.context and layer #17388

Merged
merged 5 commits into from Jun 21, 2023
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions lib/ContextModule.js
Expand Up @@ -231,6 +231,9 @@ class ContextModule extends Module {
} else if (this.options.namespaceObject) {
identifier += "|namespace object";
}
if (this.layer) {
identifier += `|layer: ${this.layer}`;
}

return identifier;
}
Expand Down
92 changes: 46 additions & 46 deletions test/__snapshots__/StatsTestCases.basictest.js.snap
Expand Up @@ -751,92 +751,92 @@ exports[`StatsTestCases should print correct stats for concat-and-sideeffects 1`
`;

exports[`StatsTestCases should print correct stats for context-independence 1`] = `
"asset main-300a2543aac9d526a381.js 12.8 KiB [emitted] [immutable] (name: main)
sourceMap main-300a2543aac9d526a381.js.map 11.1 KiB [emitted] [dev] (auxiliary name: main)
asset 695-d9846ea7920868a759cd.js 455 bytes [emitted] [immutable]
sourceMap 695-d9846ea7920868a759cd.js.map 347 bytes [emitted] [dev]
"asset main-ecc9d576a3029cd740b4.js 12.8 KiB [emitted] [immutable] (name: main)
sourceMap main-ecc9d576a3029cd740b4.js.map 11.1 KiB [emitted] [dev] (auxiliary name: main)
asset 401-13c47112ce7932f2d2da.js 455 bytes [emitted] [immutable]
sourceMap 401-13c47112ce7932f2d2da.js.map 347 bytes [emitted] [dev]
runtime modules 6.61 KiB 9 modules
orphan modules 19 bytes [orphan] 1 module
built modules 500 bytes [built]
modules by path ./a/*.js 266 bytes
./a/index.js (in Xdir/context-independence/a) 200 bytes [built] [code generated]
./a/chunk.js + 1 modules (in Xdir/context-independence/a) 66 bytes [built] [code generated]
./a/index.js (in my-layer) 200 bytes [built] [code generated]
./a/chunk.js + 1 modules (in my-layer) 66 bytes [built] [code generated]
modules by path ./a/c/ 216 bytes
./a/c/ ./a/cc/ eager ^\\\\.\\\\/.*$ namespace object (in Xdir/context-independence/a) 198 bytes [built] [code generated]
./a/c/a.js (in Xdir/context-independence/a) 18 bytes [optional] [built] [code generated]
./a/cc/b.js (in Xdir/context-independence/a) 18 bytes [optional] [built] [code generated]
./a/c/ ./a/cc/ eager ^\\\\.\\\\/.*$ namespace object (in my-layer) 198 bytes [built] [code generated]
./a/c/a.js (in my-layer) 18 bytes [optional] [built] [code generated]
./a/cc/b.js (in my-layer) 18 bytes [optional] [built] [code generated]
webpack x.x.x compiled successfully in X ms

asset main-300a2543aac9d526a381.js 12.8 KiB [emitted] [immutable] (name: main)
sourceMap main-300a2543aac9d526a381.js.map 11.1 KiB [emitted] [dev] (auxiliary name: main)
asset 695-d9846ea7920868a759cd.js 455 bytes [emitted] [immutable]
sourceMap 695-d9846ea7920868a759cd.js.map 347 bytes [emitted] [dev]
asset main-ecc9d576a3029cd740b4.js 12.8 KiB [emitted] [immutable] (name: main)
sourceMap main-ecc9d576a3029cd740b4.js.map 11.1 KiB [emitted] [dev] (auxiliary name: main)
asset 401-13c47112ce7932f2d2da.js 455 bytes [emitted] [immutable]
sourceMap 401-13c47112ce7932f2d2da.js.map 347 bytes [emitted] [dev]
runtime modules 6.61 KiB 9 modules
orphan modules 19 bytes [orphan] 1 module
built modules 500 bytes [built]
modules by path ./b/*.js 266 bytes
./b/index.js (in Xdir/context-independence/b) 200 bytes [built] [code generated]
./b/chunk.js + 1 modules (in Xdir/context-independence/b) 66 bytes [built] [code generated]
./b/index.js (in my-layer) 200 bytes [built] [code generated]
./b/chunk.js + 1 modules (in my-layer) 66 bytes [built] [code generated]
modules by path ./b/c/ 216 bytes
./b/c/ ./b/cc/ eager ^\\\\.\\\\/.*$ namespace object (in Xdir/context-independence/b) 198 bytes [built] [code generated]
./b/c/a.js (in Xdir/context-independence/b) 18 bytes [optional] [built] [code generated]
./b/cc/b.js (in Xdir/context-independence/b) 18 bytes [optional] [built] [code generated]
./b/c/ ./b/cc/ eager ^\\\\.\\\\/.*$ namespace object (in my-layer) 198 bytes [built] [code generated]
./b/c/a.js (in my-layer) 18 bytes [optional] [built] [code generated]
./b/cc/b.js (in my-layer) 18 bytes [optional] [built] [code generated]
webpack x.x.x compiled successfully in X ms

asset main-28a424a328c5fd8fe5bc.js 14.9 KiB [emitted] [immutable] (name: main)
asset 695-3a54289b6e0375f1e753.js 1.51 KiB [emitted] [immutable]
asset main-3758721949997d4d6c27.js 14.9 KiB [emitted] [immutable] (name: main)
asset 401-b6ce7fcc3598f30709fb.js 1.51 KiB [emitted] [immutable]
runtime modules 6.61 KiB 9 modules
orphan modules 19 bytes [orphan] 1 module
built modules 500 bytes [built]
modules by path ./a/*.js 266 bytes
./a/index.js (in Xdir/context-independence/a) 200 bytes [built] [code generated]
./a/chunk.js + 1 modules (in Xdir/context-independence/a) 66 bytes [built] [code generated]
./a/index.js (in my-layer) 200 bytes [built] [code generated]
./a/chunk.js + 1 modules (in my-layer) 66 bytes [built] [code generated]
modules by path ./a/c/ 216 bytes
./a/c/ ./a/cc/ eager ^\\\\.\\\\/.*$ namespace object (in Xdir/context-independence/a) 198 bytes [built] [code generated]
./a/c/a.js (in Xdir/context-independence/a) 18 bytes [optional] [built] [code generated]
./a/cc/b.js (in Xdir/context-independence/a) 18 bytes [optional] [built] [code generated]
./a/c/ ./a/cc/ eager ^\\\\.\\\\/.*$ namespace object (in my-layer) 198 bytes [built] [code generated]
./a/c/a.js (in my-layer) 18 bytes [optional] [built] [code generated]
./a/cc/b.js (in my-layer) 18 bytes [optional] [built] [code generated]
webpack x.x.x compiled successfully in X ms

asset main-28a424a328c5fd8fe5bc.js 14.9 KiB [emitted] [immutable] (name: main)
asset 695-3a54289b6e0375f1e753.js 1.51 KiB [emitted] [immutable]
asset main-3758721949997d4d6c27.js 14.9 KiB [emitted] [immutable] (name: main)
asset 401-b6ce7fcc3598f30709fb.js 1.51 KiB [emitted] [immutable]
runtime modules 6.61 KiB 9 modules
orphan modules 19 bytes [orphan] 1 module
built modules 500 bytes [built]
modules by path ./b/*.js 266 bytes
./b/index.js (in Xdir/context-independence/b) 200 bytes [built] [code generated]
./b/chunk.js + 1 modules (in Xdir/context-independence/b) 66 bytes [built] [code generated]
./b/index.js (in my-layer) 200 bytes [built] [code generated]
./b/chunk.js + 1 modules (in my-layer) 66 bytes [built] [code generated]
modules by path ./b/c/ 216 bytes
./b/c/ ./b/cc/ eager ^\\\\.\\\\/.*$ namespace object (in Xdir/context-independence/b) 198 bytes [built] [code generated]
./b/c/a.js (in Xdir/context-independence/b) 18 bytes [optional] [built] [code generated]
./b/cc/b.js (in Xdir/context-independence/b) 18 bytes [optional] [built] [code generated]
./b/c/ ./b/cc/ eager ^\\\\.\\\\/.*$ namespace object (in my-layer) 198 bytes [built] [code generated]
./b/c/a.js (in my-layer) 18 bytes [optional] [built] [code generated]
./b/cc/b.js (in my-layer) 18 bytes [optional] [built] [code generated]
webpack x.x.x compiled successfully in X ms

asset main-4a6f8afd60ce404bbe3a.js 13.8 KiB [emitted] [immutable] (name: main)
asset 695-ace208366ce0ce2556ef.js 1.01 KiB [emitted] [immutable]
asset main-5863fe93a8f1642e8b5f.js 13.8 KiB [emitted] [immutable] (name: main)
asset 401-663e81b0f603cec214a5.js 1.01 KiB [emitted] [immutable]
runtime modules 6.61 KiB 9 modules
orphan modules 19 bytes [orphan] 1 module
built modules 500 bytes [built]
modules by path ./a/*.js 266 bytes
./a/index.js (in Xdir/context-independence/a) 200 bytes [built] [code generated]
./a/chunk.js + 1 modules (in Xdir/context-independence/a) 66 bytes [built] [code generated]
./a/index.js (in my-layer) 200 bytes [built] [code generated]
./a/chunk.js + 1 modules (in my-layer) 66 bytes [built] [code generated]
modules by path ./a/c/ 216 bytes
./a/c/ ./a/cc/ eager ^\\\\.\\\\/.*$ namespace object (in Xdir/context-independence/a) 198 bytes [built] [code generated]
./a/c/a.js (in Xdir/context-independence/a) 18 bytes [optional] [built] [code generated]
./a/cc/b.js (in Xdir/context-independence/a) 18 bytes [optional] [built] [code generated]
./a/c/ ./a/cc/ eager ^\\\\.\\\\/.*$ namespace object (in my-layer) 198 bytes [built] [code generated]
./a/c/a.js (in my-layer) 18 bytes [optional] [built] [code generated]
./a/cc/b.js (in my-layer) 18 bytes [optional] [built] [code generated]
webpack x.x.x compiled successfully in X ms

asset main-4a6f8afd60ce404bbe3a.js 13.8 KiB [emitted] [immutable] (name: main)
asset 695-ace208366ce0ce2556ef.js 1.01 KiB [emitted] [immutable]
asset main-5863fe93a8f1642e8b5f.js 13.8 KiB [emitted] [immutable] (name: main)
asset 401-663e81b0f603cec214a5.js 1.01 KiB [emitted] [immutable]
runtime modules 6.61 KiB 9 modules
orphan modules 19 bytes [orphan] 1 module
built modules 500 bytes [built]
modules by path ./b/*.js 266 bytes
./b/index.js (in Xdir/context-independence/b) 200 bytes [built] [code generated]
./b/chunk.js + 1 modules (in Xdir/context-independence/b) 66 bytes [built] [code generated]
./b/index.js (in my-layer) 200 bytes [built] [code generated]
./b/chunk.js + 1 modules (in my-layer) 66 bytes [built] [code generated]
modules by path ./b/c/ 216 bytes
./b/c/ ./b/cc/ eager ^\\\\.\\\\/.*$ namespace object (in Xdir/context-independence/b) 198 bytes [built] [code generated]
./b/c/a.js (in Xdir/context-independence/b) 18 bytes [optional] [built] [code generated]
./b/cc/b.js (in Xdir/context-independence/b) 18 bytes [optional] [built] [code generated]
./b/c/ ./b/cc/ eager ^\\\\.\\\\/.*$ namespace object (in my-layer) 198 bytes [built] [code generated]
./b/c/a.js (in my-layer) 18 bytes [optional] [built] [code generated]
./b/cc/b.js (in my-layer) 18 bytes [optional] [built] [code generated]
webpack x.x.x compiled successfully in X ms"
`;

Expand Down
8 changes: 8 additions & 0 deletions test/configCases/layer/context-and-css/dark.js
@@ -0,0 +1,8 @@
it("should contain only black", function() {
require.context('./test1', true, /\.less$/);
require('./test2/shared.less');
/*const style = getComputedStyle(document.body);

expect(style.color).toBe(" black");
expect(style.background).toBe(" black");*/
});
9 changes: 9 additions & 0 deletions test/configCases/layer/context-and-css/light.js
@@ -0,0 +1,9 @@
require.context('./test1', true, /\.less$/);
require('./test2/shared.less');

it("should contain only white", function() {
const style = getComputedStyle(document.body);

expect(style.color).toBe(" white");
expect(style.background).toBe(" white");
});
11 changes: 11 additions & 0 deletions test/configCases/layer/context-and-css/test.config.js
@@ -0,0 +1,11 @@
module.exports = {
moduleScope(scope) {
const light = scope.window.document.createElement("link");
light.rel = "stylesheet";
light.href = "light.css";
scope.window.document.head.appendChild(light);
},
findBundle: function () {
return ["./light.js"];
}
};
3 changes: 3 additions & 0 deletions test/configCases/layer/context-and-css/test1/shared.less
@@ -0,0 +1,3 @@
body {
color: @color;
}
3 changes: 3 additions & 0 deletions test/configCases/layer/context-and-css/test2/shared.less
@@ -0,0 +1,3 @@
body {
background: @color;
}
47 changes: 47 additions & 0 deletions test/configCases/layer/context-and-css/webpack.config.js
@@ -0,0 +1,47 @@
/** @type {import("../../../../").Configuration} */
module.exports = {
target: "web",
entry: {
light: { import: "./light.js", layer: "light" },
dark: { import: "./dark.js", layer: "dark" }
},
experiments: {
layers: true,
css: true
},
output: {
filename: "[name].js"
},
module: {
rules: [
{
test: /\.less$/i,
type: "css/auto",
oneOf: [
{
issuerLayer: "light",
use: [
{
loader: "less-loader",
options: {
additionalData: "@color: white;"
}
}
]
},
{
issuerLayer: "dark",
use: [
{
loader: "less-loader",
options: {
additionalData: "@color: black;"
}
}
]
}
]
}
]
}
};
12 changes: 12 additions & 0 deletions test/configCases/layer/context/dark.js
@@ -0,0 +1,12 @@
require.context('./test1', true, /\.less$/);
require('./test2/shared.less');

it("should contain only black", function() {
const fs = require("fs");
const path = require("path");

const source = fs.readFileSync(path.join(__dirname, "dark.css"), "utf-8");

expect(source.match(/black/g)).toHaveLength(2);
expect(source).not.toContain("white");
});
12 changes: 12 additions & 0 deletions test/configCases/layer/context/light.js
@@ -0,0 +1,12 @@
require.context('./test1', true, /\.less$/);
require('./test2/shared.less');

it("should contain only white", function() {
const fs = require("fs");
const path = require("path");

const source = fs.readFileSync(path.join(__dirname, "light.css"), "utf-8");

expect(source.match(/white/g)).toHaveLength(2);
expect(source).not.toContain("black");
});
5 changes: 5 additions & 0 deletions test/configCases/layer/context/test.config.js
@@ -0,0 +1,5 @@
module.exports = {
findBundle: function () {
return ["./light.js", "./dark.js"];
}
};
3 changes: 3 additions & 0 deletions test/configCases/layer/context/test1/shared.less
@@ -0,0 +1,3 @@
.test1 {
color: @color;
}
3 changes: 3 additions & 0 deletions test/configCases/layer/context/test2/shared.less
@@ -0,0 +1,3 @@
.test2 {
color: @color;
}
55 changes: 55 additions & 0 deletions test/configCases/layer/context/webpack.config.js
@@ -0,0 +1,55 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/** @type {import("../../../../").Configuration} */
module.exports = {
entry: {
light: { import: "./light.js", layer: "light" },
dark: { import: "./dark.js", layer: "dark" }
},
experiments: {
layers: true
},
output: {
filename: "[name].js"
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
})
],
module: {
rules: [
{
test: /\.less$/i,
oneOf: [
{
issuerLayer: "light",
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "less-loader",
options: {
additionalData: "@color: white;"
}
}
]
},
{
issuerLayer: "dark",
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "less-loader",
options: {
additionalData: "@color: black;"
}
}
]
}
]
}
]
}
};
2 changes: 1 addition & 1 deletion test/statsCases/context-independence/webpack.config.js
Expand Up @@ -26,7 +26,7 @@ const base = (name, devtool) => ({
entry: {
main: {
import: "./index",
layer: path.resolve(__dirname, name)
layer: "my-layer"
Copy link
Member Author

Choose a reason for hiding this comment

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

Changed because we can't be context independence here, we use different layers, so we will have different modules and to fix it we need to change it to the same value between builds, i.e. the layer is just a string, it is a part of a module's identifier, we use module identifier to generate modules ids, so when we have different identifiers we will have different ids, no one use it like an absolute path as we have in this test

}
},
context: path.resolve(__dirname, name),
Expand Down