<p dir="auto">Consider i have the following directory tree in my application:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" - app.js
 - locale/
  - es/
    - module1/
       - form1.json
       - form2.json
    - module2/
       - form3.json
       - form4.json
  - en/
    - module1/
       - form1.json
       - form2.json
    - module2/
       - form3.json
       - form4.json"><pre class="notranslate"><code class="notranslate"> - app.js
 - locale/
  - es/
    - module1/
       - form1.json
       - form2.json
    - module2/
       - form3.json
       - form4.json
  - en/
    - module1/
       - form1.json
       - form2.json
    - module2/
       - form3.json
       - form4.json
</code></pre></div>
<p dir="auto">And app.js has this content:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/* ... */
function loadLazyModule (moduleName)
{
    require.ensure ([], function ()
    {
        var lang = /* Browser language */;      
        var forms = ['form1', 'form2'] /* Get dynamically the array of forms? */

        for (var i = 0; i &lt; forms.length; i++)
        {
            var translations = require (
                'locale/'+ lang +'/'+ moduleName +'/'+ form[i] +'.json');
            registerTranslations (translations);
        }
    });
}
/* ... */"><pre class="notranslate"><code class="notranslate">/* ... */
function loadLazyModule (moduleName)
{
    require.ensure ([], function ()
    {
        var lang = /* Browser language */;      
        var forms = ['form1', 'form2'] /* Get dynamically the array of forms? */

        for (var i = 0; i &lt; forms.length; i++)
        {
            var translations = require (
                'locale/'+ lang +'/'+ moduleName +'/'+ form[i] +'.json');
            registerTranslations (translations);
        }
    });
}
/* ... */
</code></pre></div>
<p dir="auto">I need a main chunk with the core of my app, but i need to split every language translations of every module in diferent chunks and load them only when requested from the user. Im already using the json-loader for json files and the 'split-by-name-webpack-plugin' but it doesn't works with dynamic loading (require.ensure).</p>
<p dir="auto">The output should be as follows:</p>
<ul dir="auto">
<li>myApp.js</li>
<li>locale.module1.es.js</li>
<li>locale.module2.es.js</li>
<li>locale.module1.en.js</li>
<li>locale.module2.en.js</li>
</ul>
<p dir="auto">Thanks.</p>
<p dir="auto">I'm having a hard time figuring this out. I have all these node_modules which include the css files I need but I can only get the javascript from the require.</p>
<p dir="auto">For example require('bootstrap') will only return the js file and not the css.</p>
<p dir="auto">I've tried</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="require(&quot;!style!css!bootstrap/dist/css&quot;);"><pre class="notranslate"><code class="notranslate">require("!style!css!bootstrap/dist/css");
</code></pre></div>
<p dir="auto">but I just get this error:</p>
<blockquote>
<p dir="auto">ERROR in ./app/js/loader.js<br>
Module not found: Error: Cannot resolve module 'bootstrap.css' in C:\Users\Administrator\Dropbox\projects\spDash\app\js<br>
@ ./app/js/loader.js 10:0-24</p>
<p dir="auto">ERROR in ./app/js/loader.js<br>
Module not found: Error: Cannot resolve module 'bootstrap/dist/css' in C:\Users\Administrator\Dropbox\projects\spDash\app\js<br>
@ ./app/js/loader.js 19:0-40</p>
</blockquote>
<p dir="auto">My config looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var webpack = require('webpack')
module.exports = {
  entry: {
    'spdash': './app/js/loader.js'
  },
  output: {
    filename: 'bundle.js',
  },
  devtool: 'source-map',
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: &quot;url-loader?limit=10000&amp;minetype=application/font-woff&quot; },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: &quot;file-loader&quot; },
      {
        test: /\.css$/, // Only .css files
        loader: 'style!css' // Run both loaders
      },
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for &lt;=8k images, direct URLs for the rest
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/])
  ]
};"><pre class="notranslate"><code class="notranslate">var webpack = require('webpack')
module.exports = {
  entry: {
    'spdash': './app/js/loader.js'
  },
  output: {
    filename: 'bundle.js',
  },
  devtool: 'source-map',
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&amp;minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
      {
        test: /\.css$/, // Only .css files
        loader: 'style!css' // Run both loaders
      },
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for &lt;=8k images, direct URLs for the rest
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/])
  ]
};
</code></pre></div>