Issue 1:
Do you want to request a feature or report a bug?

bug

What is the current behavior?

Hi, I'm novice in Webpack. I spend many hours from this problem..

In Webpack4 config, there are 3 entry points.

I set entry points up depending on each page(signin, signup and some menu pages).

In main.vue, each {certain_menu.vue} is imported dynamically.

entry: {
signin: 'SOME_PATH/signin.vue', // non-dynamic
signup: 'SOME_PATH/signup.vue', // non-dynamic
main: 'SOME_PATH/main.vue' // dynamic import is used depending on menu url
},
output: {
path: PATH.build,
publicPath: PATH.publicPath,
filename: '[name].js',
chunkFilename: '[name]_chunk.js'
},
...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { modules: false }]
],
plugins: [BabelPluginDynamicImportWebpack] // Dynamic import 지원
}
},
"eslint-loader"
]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
name: function(filePath){
var defaultPath = 'assets', subPath = '';
var defaultNameStr = '/[name].[ext]?[hash]';
var props = ['images', 'fonts'], i = 0, max = props.length, prop = '';

for(i = 0; i < max; i++){
prop = props[i];
if (filePath.indexOf(prop) > -1){
subPath = prop;
break;
}
}

if(!subPath) subPath = defaultPath;

return subPath + defaultNameStr;
},
limit: 10000
}
}
]
},
{
test: /fabric(\.min)?\.js$/,
use: 'exports-loader?fabric'
}
]
},
plugins: {
new ManifestPlugin({
fileName: 'bundle.json'
}),
new VueLoaderPlugin(),
new BundleAnalyzerPlugin({
analyzerPort: 4000
}),
new MiniCssExtractPlugin({
filename: '[name].css'
})
},
optimization: {
splitChunks: {
cacheGroups: {
// Extract vendor module
vendor: {
name: 'vendor',
test: /node_modules/,
chunks: 'all',
enforce: true
},
// Extract component source code used commonly in each entry point
common: {
name: 'common',
test: function(m){
// var request = m.request;
var flag = false;
var moduleList = Modules.common;
var i = 0, max = moduleList.length;
for(i = 0; i < max; i++){
if (m.nameForCondition
&& m.nameForCondition().indexOf(moduleList[i]) > -1) {
flag = true;
break;
}
}
return flag;
},
chunks: 'all',
reuseExistingChunk: true,
enforce: true
}
}
}
}

After loading vendor.css/js and common.css/js,

SOME_HOST/front/signin => signin.js, signin.css are loaded.

SOME_HOST/front/signup => signup.js, signup.css are loaded.

SOME_HOST/front/{some_menu}=> main.js, main.css and 0.js / 0.css are loaded.

[After finish bundling]

Entrypoint signin = vendor_chunk.js common.css common_chunk.js signin.css signin.js
Entrypoint signup = vendor_chunk.js common.css common_chunk.js signup.css signup.js
Entrypoint main = vendor_chunk.js common.css common_chunk.js main.css main.js

[bundle.json]

{
"0.css": "/front/static/build/0.css", // including signin.css, signup.css
"0_chunk.js": "/front/static/build/0_chunk.js", // including signin.js, signup.js
"common.css": "/front/static/build/common.css",
"common.js": "/front/static/build/common_chunk.js",
"main.css": "/front/static/build/main.css",
"main.js": "/front/static/build/main.js",
"signin.css": "/front/static/build/signin.css",
"signin.js": "/front/static/build/signin.js",
"signup.css": "/front/static/build/signup.css",
"signup.js": "/front/static/build/signup.js",
"vendor.js": "/front/static/build/vendor_chunk.js",
// some fonts and images...
}

Each page is run perfectly because App logics of signin and signup do not effect each menu's logic.

However, injected css(signin, signup) codes effect menu page style.

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

What is the expected behavior?

Based on entries, each chunk is bundled. However, bundle files(signin.css/js, signup.css/js) are duplicated, which those code are injected into 0.js(from main.js using dynamic imoprt).

How can I seperate bundle file based on multiple entries with dynamic import(usded in just one entry point)

Thanks for your help.

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

node: v9.4.0

webpack: v4.27.1

OS: macOS Mojave 10.14.2

Issue 2:
Bug report

See also: #2134 which has the same issue with a different project structure (which works fine for me).

What is the current behavior?

Let's say we are using two components where the main-component is dependent on the other-component.

(1) main-component

(2) other-component

Also, both these components have a common dependency, let's say dependency-1.0.0.

In the main component package.json, the other component is marked with a relative path '../other-component'. Thanks to npm 6.9.0, there is only a single node_modules in the main_component where all the dependencies of both the components reside together.

Now if I run a webpack4 build, I get two copies on dependency-1.0.0 referred as:

./node_modules/dependency-1.0.0

../node_modules/dependency-1.0.0

This not only bloats up the package, but also results in failure because two versions of the same dependency-1.0.0 simply can't live together.

However if I move my other-component to within the main-component, webpack4 emits depenency-1.0.0 just once, as expected.

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

Clone repository https://github.com/rickygarg/webpack-sample.

Run 'npm install' and 'npm run webpack' on the root folder with correct results.

Remove all node_modules and run 'npm install' / 'npm ci' and 'npm run webpack' in main-component with duplicate dependencies in the webpack build (despite single node_modules folder just in main-component).

What is the expected behavior?

Webpack build should include a single version of the dependency, as it does when local modules are actually contained within the main module.

Other relevant information:

webpack version: 4.29.3

Node.js version: 10.9.0

NPM version: 6.9.0

Operating System: Linux / Ubuntu

Additional tools: None