fix: do not import non javascript chunks

This commit is contained in:
Alexander Akait 2023-03-15 23:01:33 +03:00 committed by GitHub
commit f58ff9beb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 128 additions and 1 deletions

View File

@ -11,6 +11,7 @@ const HotUpdateChunk = require("../HotUpdateChunk");
const Template = require("../Template");
const { getAllChunks } = require("../javascript/ChunkHelpers");
const {
chunkHasJs,
getCompilationHooks,
getChunkFilenameTemplate
} = require("../javascript/JavascriptModulesPlugin");
@ -147,7 +148,11 @@ class ModuleChunkFormatPlugin {
undefined
);
for (const chunk of chunks) {
if (loadedChunks.has(chunk)) continue;
if (
loadedChunks.has(chunk) ||
!chunkHasJs(chunk, chunkGraph)
)
continue;
loadedChunks.add(chunk);
startupSource.add(
`import * as __webpack_chunk_${index}__ from ${JSON.stringify(

View File

@ -0,0 +1,3 @@
.bar {
color: #fff;
}

View File

@ -0,0 +1,7 @@
import { countBy } from "lodash-es";
import "./bar.css";
const result = countBy([6.1, 4.2, 6.3], Math.floor);
export default result["6"];

View File

@ -0,0 +1,3 @@
.foo {
color: #fff;
}

View File

@ -0,0 +1,7 @@
import { dropRight } from "lodash-es";
import "./foo.css";
const result = dropRight([10, 20, 30], 2);
export default result[0];

View File

@ -0,0 +1,15 @@
import foo from "./foo.js";
import bar from "./bar.js";
console.log(foo + bar);
it("should not contain non javascript chunk in the main bundle", () => {
const fs = require("fs");
const source = fs.readFileSync(__STATS__.outputPath + "/main.mjs", "utf-8");
expect(__STATS__.chunks.some(c => c.names.includes("style"))).toBe(true);
// Should not import "./style.mjs";`
expect(source).not.toMatch(
/import\s\*\sas+\s__webpack_chunk_[0-9]+__\sfrom\s"\.\/style\.mjs"/g
);
});

View File

@ -0,0 +1,5 @@
module.exports = {
findBundle: function (i, options) {
return ["main.mjs", "vendor.mjs", "runtime.mjs"];
}
};

View File

@ -0,0 +1,5 @@
const supportsRequireInModule = require("../../../helpers/supportsRequireInModule");
module.exports = () => {
return supportsRequireInModule();
};

View File

@ -0,0 +1,77 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "production",
devtool: false,
experiments: {
outputModule: true
},
output: {
publicPath: "/",
filename: "[name].mjs",
chunkFilename: "[name].chunk.js",
assetModuleFilename: "[hash][ext][query]",
module: true,
libraryTarget: "module",
chunkFormat: "module",
chunkLoading: "import",
environment: {
dynamicImport: true,
module: true
}
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
chunkFilename: "[id].css"
})
],
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
style: {
name: "style",
type: "css/mini-extract",
chunks: "all",
enforce: true
},
defaultVendors: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: "initial",
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
runtimeChunk: {
name: "runtime"
},
// currently Webpack has bugs when setting concatenateModules to true while produce ES Module output.
// concatenateModules: false,
minimize: false
}
};