<p dir="auto">Hey there!</p>
<p dir="auto">I just came across WebPack while being in the need to get rid of many requests just to gather together some resources (various scripts, etc). For now, I have been doing this using PHP. A Yii extension allows me to add together all my scripts into a single file. However, minification and things alike don't work. There also is no support for some advanced parsing and pre-processing.</p>
<p dir="auto">So I have a few questions:</p>
<ul dir="auto">
<li>Within webpack-app (the example app) you used the <code class="notranslate">jamjs</code> system for some dependencies. Would you recommend this to work nicely alongside webpack?</li>
<li>I currently have quite a few dependencies that I am currently managing via - you are going to scream... - <code class="notranslate">git submodule</code>. As you can tell, this is <strong>not</strong> very elegant! My main dependencies include Bootstrap and jQuery, but also smaller jQuery plugins. How can I add these smaller plugins, that are oftenly just a single file, to webpack? Is there a recommended way to do so? As an example for this question, consider <code class="notranslate">jQuery.stickyFooter</code> and <code class="notranslate">jQuery.rangyInputs</code>.</li>
<li>Am I right to assume that loaders are chained by separating them by exclamation points ("!")? I.e.: <code class="notranslate">style-loader!css-loader!scss-loader</code></li>
<li>I want to build a loader for <a href="http://npmjs.org/ojc" rel="nofollow">OJ</a>. It has a runtime that needs to be included for the browser to work. This runtime currently only supports the browser and needs to run in global space. Imagine I had done the loader, how would I go about loading <code class="notranslate">.oj</code> files?</li>
<li>Within my app, I have a slightly changing demand for scripts. When I am at <code class="notranslate">/site/main</code> I only want jQuery, Bootstrap and some fancy stuff. But when I am within <code class="notranslate">/chat</code>, I would like to be able to load a lot more JS files. What is a good way to handle this? I know there is the async way of require-ing files. But how exactly does it work? Do I specify the path directly to the file? Say I have <code class="notranslate">main.js</code> and a subfolder called <code class="notranslate">chat/</code> containing a few various scripts specially for the chat. How do I load them all?</li>
<li>Does webpack understand symlinks? I currently have the Socket.IO client library symlinked into my main folder. What is the best way to get this to the browser?</li>
</ul>
<p dir="auto">Sorry for the load of questions - but I decided that it was better to put it all here instead of spawning one issue per question - I hope you don't mind :)</p>
<p dir="auto">Webpack looks very promising and I can't wait to use it. I am just currently considering how to. The CLI seems a bit sparse and I am unsure on how exactly I have to create my webpack.</p>
<p dir="auto">Kind regards, Ingwie!</p>
<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>
ProfilingPlugin crashes build when using <code class="notranslate">source-map</code> devtool</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const webpack = require('webpack');

module.exports = {
	devtool: 'source-maps',
	plugins: [
		new webpack.debug.ProfilingPlugin()
	]
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
	<span class="pl-c1">devtool</span>: <span class="pl-s">'source-maps'</span><span class="pl-kos">,</span>
	<span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
		<span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">debug</span><span class="pl-kos">.</span><span class="pl-c1">ProfilingPlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
	<span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><code class="notranslate">webpack --mode=production</code> fails with the following stack trace:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Unhandled rejection TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
    at compilation.hooks.afterOptimizeChunkAssets.tap (~/webpack-issue/node_modules/webpack/lib/SourceMapDevToolPlugin.js:108:26)
    at args (~/webpack-issue/node_modules/webpack/lib/debug/ProfilingPlugin.js:383:10)
    at SyncHook.eval [as call] (eval at create (~/webpack-issue/node_modules/tapable/lib/HookCodeFactory.js:17:12), &lt;anonymous&gt;:9:1)
    at SyncHook.lazyCompileHook [as _call] (~/webpack-issue/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (~/webpack-issue/node_modules/webpack/lib/Compilation.js:947:42)
    ..."><pre class="notranslate"><code class="notranslate">Unhandled rejection TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
    at compilation.hooks.afterOptimizeChunkAssets.tap (~/webpack-issue/node_modules/webpack/lib/SourceMapDevToolPlugin.js:108:26)
    at args (~/webpack-issue/node_modules/webpack/lib/debug/ProfilingPlugin.js:383:10)
    at SyncHook.eval [as call] (eval at create (~/webpack-issue/node_modules/tapable/lib/HookCodeFactory.js:17:12), &lt;anonymous&gt;:9:1)
    at SyncHook.lazyCompileHook [as _call] (~/webpack-issue/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (~/webpack-issue/node_modules/webpack/lib/Compilation.js:947:42)
    ...
</code></pre></div>
<p dir="auto">Removing <code class="notranslate">devtool</code> fixes the build.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
It should work</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong></p>
<p dir="auto">webpack 4.1.1<br>
macOS High Siera 10.13.3<br>
node v8.4.0</p>