catamphetamine / webpack-isomorphic-tools

Server-side rendering for your Webpack-built applications (e.g. React)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ExtractTextPlugin 2.0.0-rc.2 with `allChunks: true` and `require.ensure` not creating production asset stats

dtothefp opened this issue · comments

Similar to #111 but in production mod my assets stats are an empty object.

"webpack": "2.2.0",
"extract-text-webpack-plugin": "2.0.0-rc.2",

I'm using require.ensure to chunk out JS components and was testing if allChunks: true would result in my CSS being extracted, because it was being included in the chunked JS bundle.

I can post an example repo if the below config/output isn't enough info

// iso tools config
import WebpackIsomorphicToolsPlugin from 'webpack-isomorphic-tools/plugin';

/**
 * Use webpack-isomorphic-tools to generate webpack stats
 * and return the Plugin
 * @param {Object} config global task config
 * @return {Object} isomorphic-tools webpack plugin
 */
export default function(config) {
  const {
    env,
    dest,
    cwd,
    statsFile,
  } = config;
  const isDev = env === `development`;
  const statsFileFp = cwd(dest, statsFile);
  const toolsConfig = {
    debug: false,
    webpack_assets_file_path: statsFileFp, // eslint-disable-line camelcase
    assets: {
      images: {
        extensions: [
          `jpeg`,
          `jpg`,
          `png`,
          `gif`,
          `svg`,
        ],
        parser: WebpackIsomorphicToolsPlugin.url_loader_parser,
      },
      styles: {
        extensions: [`css`],
        filter(module, regex, options, log) {
          return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log);
        },
        path(module, options, log) {
          return WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log);
        },
        parser(module, options, log) {
          return WebpackIsomorphicToolsPlugin.css_modules_loader_parser(module, options, log);
        },
      },
    },
  };

  return new WebpackIsomorphicToolsPlugin(toolsConfig).development(isDev);
}

NODE_ENV=development

{
  "javascript": {
    "main": "http://localhost:9090/main.js"
  },
  "styles": {
    "main": "http://localhost:9090/main.css"
  },
  "assets": {
    "./src/components/app.css": {
      "spacing": "app__spacing___31O1U",
      "mattresses": "app__mattresses____MTtZ",
      "pillows": "app__pillows___2e9yC",
      "sheets": "app__sheets___6URHi",
      "_style": ".app__spacing___31O1U{\n  display:block;\n}\n\n.app__mattresses____MTtZ{\n  color:red;\n}\n\n.app__pillows___2e9yC{\n  color:blue;\n}\n\n.app__sheets___6URHi{\n  color:green;\n}\n"
    },
    "./src/components/child.css": {
      "bg": "child__bg___4rDmZ",
      "_style": ".child__bg___4rDmZ{\n  background:grey;\n}\n"
    }
  }
}

NODE_ENV=production

{
   "javascript":{
      "main":"/main-738f5c4b8225ab65de82-1485898124871.js"
   },
   "styles":{
      "main":"/main-738f5c4b8225ab65de82-1485898124871.css"
   },
   "assets":{

   }
}

So, what you're saying here is that allChunks: true option breaks the CSS modules parser?
You could try to write your own parser then to see what's different in this case.
I'm not using CSS modules myself so I didn't run into this kind of issues with Webpack 2.

I'm dumb, just copied and pasted your parser config for CSS modules. I had previously left out the options.development clause, for some reason with allChunks: true for extract-text-plugin I need to have that extra config