<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
Hi, I'm novice in Webpack. I spend many hours from this problem..<br>
In Webpack4 config, there are 3 entry points.<br>
I set entry points up depending on each page(signin, signup and some menu pages).<br>
In main.vue, each {certain_menu.vue} is imported dynamically.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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 지원
					}
				},
				&quot;eslint-loader&quot;
			]
		},
		{
			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 &lt; max; i++){
								prop = props[i];
								if (filePath.indexOf(prop) &gt; -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 &lt; max; i++){
						if (m.nameForCondition 
                                                      &amp;&amp; m.nameForCondition().indexOf(moduleList[i]) &gt; -1) {
							flag = true;
							break;
						}
					}
					return flag;
				},
				chunks: 'all',
				reuseExistingChunk: true,
				enforce: true
			}
		}
	}
}"><pre class="notranslate"><code class="notranslate">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 &lt; max; i++){
								prop = props[i];
								if (filePath.indexOf(prop) &gt; -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 &lt; max; i++){
						if (m.nameForCondition 
                                                      &amp;&amp; m.nameForCondition().indexOf(moduleList[i]) &gt; -1) {
							flag = true;
							break;
						}
					}
					return flag;
				},
				chunks: 'all',
				reuseExistingChunk: true,
				enforce: true
			}
		}
	}
}
</code></pre></div>
<p dir="auto">After loading vendor.css/js and common.css/js,<br>
SOME_HOST/front/signin =&gt; signin.js, signin.css are loaded.<br>
SOME_HOST/front/signup =&gt; signup.js, signup.css are loaded.<br>
SOME_HOST/front/{some_menu}=&gt; main.js, main.css and 0.js / 0.css are loaded.</p>
<p dir="auto">[After finish bundling]</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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"><pre class="notranslate"><code class="notranslate">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
</code></pre></div>
<p dir="auto">[bundle.json]</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;0.css&quot;: &quot;/front/static/build/0.css&quot;, // including signin.css, signup.css
  &quot;0_chunk.js&quot;: &quot;/front/static/build/0_chunk.js&quot;, // including signin.js, signup.js
  &quot;common.css&quot;: &quot;/front/static/build/common.css&quot;,
  &quot;common.js&quot;: &quot;/front/static/build/common_chunk.js&quot;,
  &quot;main.css&quot;: &quot;/front/static/build/main.css&quot;,
  &quot;main.js&quot;: &quot;/front/static/build/main.js&quot;,
  &quot;signin.css&quot;: &quot;/front/static/build/signin.css&quot;,
  &quot;signin.js&quot;: &quot;/front/static/build/signin.js&quot;,
  &quot;signup.css&quot;: &quot;/front/static/build/signup.css&quot;,
  &quot;signup.js&quot;: &quot;/front/static/build/signup.js&quot;,
  &quot;vendor.js&quot;: &quot;/front/static/build/vendor_chunk.js&quot;,
  // some fonts and images...
}"><pre class="notranslate"><code class="notranslate">{
  "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...
}
</code></pre></div>
<p dir="auto">Each page is run perfectly because App logics of signin and signup do not effect each menu's logic.<br>
However, injected css(signin, signup) codes effect menu page style.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
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).<br>
How can I seperate bundle file based on multiple entries with dynamic import(usded in just one entry point)<br>
Thanks for your help.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong><br>
node: v9.4.0<br>
webpack: v4.27.1<br>
OS: macOS Mojave 10.14.2</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto">See also: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="138133596" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/2134" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/2134/hovercard" href="https://github.com/webpack/webpack/issues/2134">#2134</a> which has the same issue with a different project structure (which works fine for me).</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Let's say we are using two  components where the main-component is dependent on the other-component.</p>
<p dir="auto">(1) main-component<br>
(2) other-component</p>
<p dir="auto">Also, both these components have a common dependency, let's say dependency-1.0.0.</p>
<p dir="auto">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.</p>
<p dir="auto">Now if I run a webpack4 build, I get two copies on dependency-1.0.0 referred as:</p>
<p dir="auto">./node_modules/dependency-1.0.0<br>
../node_modules/dependency-1.0.0</p>
<p dir="auto">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.</p>
<p dir="auto">However if I move my other-component to within the main-component, webpack4 emits depenency-1.0.0 just once, as expected.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Clone repository <a href="https://github.com/rickygarg/webpack-sample">https://github.com/rickygarg/webpack-sample</a>.</li>
<li>Run 'npm install' and 'npm run webpack' on the root folder with correct results.</li>
<li>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).</li>
</ol>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Webpack build should include a single version of the dependency, as it does when local modules are actually contained within the main module.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.29.3<br>
Node.js version: 10.9.0<br>
NPM version: 6.9.0<br>
Operating System: Linux / Ubuntu<br>
Additional tools: None</p>