0

I have the following webpack configuration:

var path = require('path'),
    webpack = require('webpack'),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    WebpackStripLoader = require('strip-loader');

const webpack_config = {
  context: path.join(__dirname, 'src'),
  entry: './lib/Polywrap',
  output: {
    path: path.join(__dirname, 'build'),
    chunkFilename: "[id].bundle.js"
    filename: '[name].js'
  },
  plugins: [],
  module: {
    resolve: {
        extensions: ['']
    },
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            include: path.join(__dirname, './src'),
            query : {
              presets: ['es2015'],
            }
        }
    ]
  }
};

//
// Environment-specific confs
//
switch (process.env.NODE_ENV) {
  case "prod":
      console.warn("Prod mode");

      var stripLoader = {
            test: [/\.js$/],
            exclude: /node_modules/,
            loader: WebpackStripLoader.loader('console.log')
        };

      webpack_config.module.loaders.push(stripLoader);

      webpack_config.plugins.push(
          new webpack.DefinePlugin({
              'process.env': {
                  NODE_ENV: JSON.stringify('production')
              }
          })
      );

      webpack_config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            include: /\.js$/,
            compress: {
                warnings: false
            }
        })
      );
      break;
    case "dev":
      console.warn("Dev mode");
      // Let's omit this for example's sake
      break;
}

module.exports = webpack_config;

and lib/Polywrap.js has the following code, trying to explit the code splitting:

function getLangObj(templateName) {
    return require("../langs/"+templateName);
}
console.log(getLangObj("it-IT.js"));
console.log(getLangObj("en-US.js"));

I was expecting three files emitted: the Polywrap and the two chunks. Unfortunately, just Polywrap is emitted with everything bundled: all my js files inside ../langs/ are bundled. What's wrong?

Here is the output:

Prod mode
Hash: f93ad402ea615e465db5
Version: webpack 1.13.3
Time: 1107ms
  Asset     Size  Chunks             Chunk Names
main.js  1.93 kB       0  [emitted]  main
   [1] ./langs ^\.\/.*$ 268 bytes {0} [built]
    + 5 hidden modules
Bertuz
  • 2,390
  • 3
  • 25
  • 50
  • You need to use `require.ensure` or multiple entry points to define a split point. Using `require` on it's own (even dynamically) won't work. – CodingIntrigue Nov 29 '16 at 08:37
  • Well, wasn't supposed a function with a parameter to create a *context*, according to the [documentation](https://github.com/webpack/webpack/tree/master/examples/require.context#examplejs)? I took inspiration by the original [example](https://github.com/webpack/webpack/tree/master/examples/require.context#examplejs) linked in webpack. Actually I managed to make it work by requesting an array of an element in place of a single string, but I still have to dig a bit yet – Bertuz Nov 29 '16 at 09:02
  • I think a *context* means that the module is not evaluated at compile time - it's still rendered into the same bundle. However, here is an example of using this alongside code-splitting (using require.ensure as I mentioned): https://github.com/webpack/webpack/tree/master/examples/code-splitted-require.context – CodingIntrigue Nov 29 '16 at 09:08
  • You are absolutely right: the two ways are either using `require.ensure` and then `require` or the AMD way, which I followed. The link you posted generates a single *chunk*, but what I was trying to do was splitting the two requests in two distinct chunks. According to [this discussion](https://github.com/webpack/webpack/issues/640) is not that easy? Can you confirm? Do you know clear and official way to accomplish that? – Bertuz Nov 29 '16 at 09:23

0 Answers0