{
"devDependencies": {
"clean-webpack-plugin": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.26.0"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
the project directory is as follows:
src/
a.js
b.js
common.js
index.js
common.js:
export default "init";
a.js:
import common from"./common.js"
export default {
init() {
return `a.js ${common}`
}
}
b.js:
import common from"./common.js"
export default {
init() {
return `b.js ${common}`
}
}
index.js:
import a from "./a"
import b from "./b"
import common from"./common.js"
import $ from "jquery"
console.log($);
console.log(`index.js ${common}`);
console.log(a.init());
console.log(b.init());
webpack.config.js:
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const cleanPlugin = require("clean-webpack-plugin");
module.exports = {
mode: "development",
entry: {
index: path.resolve(__dirname, "src", "index.js")
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist")
},
resolve: {
extensions: [".js"]
},
optimization: {
minimize: false,
splitChunks: {
cacheGroups: {
commons: {
chunks: "all",
name: "commons",
minSize: 0,
minChunks: 2,
},
vendor: {
test: /node_modules/,
chunks: "all",
name: "vendor",
priority: 10,
minSize: 0,
}
}
},
runtimeChunk: {
name: "runtime"
}
},
plugins: [
new htmlWebpackPlugin({
filename: "index.html",
template: "./index.html"
}),
new cleanPlugin(["dist"])
]
};
if you understand it correctly, you should output the contents of the public module src/common.js that should contain the project in commons.js index.js runtime.js vendor.js index.html
commons.js
but after execution, it is found as follows:
Why is commons.js not output?