Webpack 3 support

[grofzero]

Hi,

This plugin silently fails with Webpack 3. Could you take a look at it?

thx grofzero

[tomachristian]

@grofzero can you provide some details about the configuration you are using?

UPDATE: It might be related to the internal usage of extract-text-webpack-plugin

[grofzero]

@tomachristian Our config is like this. It generates a facelift.bundle.js but no css at all

const path = require('path'); const CssEntryPlugin = require("css-entry-webpack-plugin");

module.exports = { devtool: (process.env.NODE_ENV == 'production') ? 'source-map' : 'cheap-module-source-map', entry: { 'facelift': ['./application-v8/source/portal/impl/c/facelift/fonts.css', './application-v8/source/portal/impl/c/facelift/tipography.css', './application-v8/source/portal/impl/c/facelift/list.css', './application-v8/source/portal/impl/c/facelift/buttons.css', './application-v8/source/portal/impl/c/facelift/navigation.css', './application-v8/source/portal/impl/c/facelift/tables.css', './application-v8/source/portal/impl/c/facelift/form.css', './application-v8/source/portal/impl/c/facelift/box.css', './application-v8/source/portal/impl/c/facelift/elements.css', './application-v8/source/portal/impl/c/facelift/datepicker.css' ] }, output: { path: path.resolve(dirname, './dist/tmp'), filename: '[name].bundle.js', chunkFilename: '[name].bundle.js', publicPath: '/static/portal/' }, plugins: [ new CssEntryPlugin({ output: { filename: 'impl/c/facelift/facelift.css' } }) ], module: { rules: [{ test: /.css$/, use: 'css-raw-loader', include: [ path.resolve(dirname, './application-v8/source/portal/impl/c/facelift') ] }] }

};

[tomachristian]

Unfortunately I do not have time to take a look at the moment. I will try to do it in a few days.

[unlight]

"extract-text-webpack-plugin": "3.0.0-rc.2",
"webpack": "3.1.0",

Copied extract-text-webpack-plugin to dependency of css-entry-webpack-plugin Result:

C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:246
            if (extractedChunk.getNumberOfModules()) {
                               ^
TypeError: extractedChunk.getNumberOfModules is not a function
    at ExtractTextPlugin.<anonymous> (C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:246:32)
    at Array.forEach (native)
    at Compilation.<anonymous> (C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:245:27)
    at Compilation.applyPluginsAsyncSeries (C:\Dev\project\node_modules\tapable\lib\Tapable.js:142:13)
    at sealPart2 (C:\Dev\project\node_modules\webpack\lib\Compilation.js:635:9)
    at next (C:\Dev\project\node_modules\tapable\lib\Tapable.js:138:11)
    at Compilation.compilation.plugin (C:\Dev\project\node_modules\webpack\lib\ProgressPlugin.js:111:6)
    at next (C:\Dev\project\node_modules\tapable\lib\Tapable.js:140:14)
    at C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:241:13
    at C:\Dev\project\node_modules\async\dist\async.js:421:16
    at iteratorCallback (C:\Dev\project\node_modules\async\dist\async.js:998:13)
    at C:\Dev\project\node_modules\async\dist\async.js:906:16
    at C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:224:15
    at C:\Dev\project\node_modules\async\dist\async.js:421:16
    at iteratorCallback (C:\Dev\project\node_modules\async\dist\async.js:998:13)
    at C:\Dev\project\node_modules\async\dist\async.js:906:16
    at C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:221:22
    at C:\Dev\project\node_modules\async\dist\async.js:3083:16
    at eachOfArrayLike (C:\Dev\project\node_modules\async\dist\async.js:1003:9)
    at eachOf (C:\Dev\project\node_modules\async\dist\async.js:1051:5)
    at Object.eachLimit (C:\Dev\project\node_modules\async\dist\async.js:3145:5)
    at C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:189:29
    at C:\Dev\project\node_modules\async\dist\async.js:3083:16
    at eachOfArrayLike (C:\Dev\project\node_modules\async\dist\async.js:1003:9)
    at eachOf (C:\Dev\project\node_modules\async\dist\async.js:1051:5)
    at Object.eachLimit (C:\Dev\project\node_modules\async\dist\async.js:3145:5)
    at Compilation.<anonymous> (C:\Dev\project\node_modules\css-entry-webpack-plugin\node_modules\extract-text-webpack-plugin\dist\index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (C:\Dev\project\node_modules\tapable\lib\Tapable.js:142:13)
    at Compilation.seal (C:\Dev\project\node_modules\webpack\lib\Compilation.js:578:8)
    at C:\Dev\project\node_modules\webpack\lib\Compiler.js:510:16

[dorianWB]

Im also having a problem with this, would like to keep this and webpack 3.

[dorianWB]

For @grofzero and anyone still waiting on a fix for this: it seems with webpack 3 at least you can get similar results without this plugin. I just removed the plugin and replaced it with the updated extract-text-webpack-plugin with the same filename property. With this method I also get unused js files for loading the generated css files, but that's not a problem for me.

[unlight]

@dorianWB Could you provide more details about how you get similar result? I've tried use extract-text-webpack-plugin instead but still get style.js

[dorianWB]

I have simplified what I have a bit, but its just: entries for each of the scss I want to build using a glob: entry: utils.entries({}, './src/scss/*/index.scss'), loaders for scss actually (using vue myself): module: { rules: [ ...utils.styleLoaders({ extract: true })] } plugins: new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].css') }), and in output I still have: filename: utils.assetsPath('js/[name].js'), and it spits out js in the js path as well as css in the css path @unlight

[unlight]

Thanks @dorianWB I made some to cheeky modifications to get rid of unused js

config.output.filename = `dummy.js`;
...
plugins: [
    new ExtractTextPlugin(`[name]${options.prod ? '-[contenthash:6]' : ''}.css`),
    // Duck typed plugin, removes dummy.js after extract text plugin.
    {
        apply(compiler) {
            compiler.plugin('emit', (compilation, callback) => {
                delete compilation.assets['dummy.js'];
                delete compilation.assets['dummy.js.map'];
                callback();
            });
        }
    }
]

[dorianWB]

actually @unlight I took what you added and with the code below you should be able to use CssEntryPlugin instead of ExtractTextPlugin with the simplest case and get no extra js files : ` var ExtractTextPlugin = require('extract-text-webpack-plugin')

class CssEntryPlugin extends ExtractTextPlugin { apply(compiler) { super.apply(compiler); compiler.plugin('compilation', (compilation) => { compilation.plugin('after-optimize-chunk-assets', (chunks) => { chunks.forEach((chunk) => { delete compilation.assets[compiler.options.output.filename.replace('[name]', chunk.name)]; delete compilation.assets[compiler.options.output.filename.replace('[name]', chunk.name)]; }); }); }); } }`

[dorianWB]

@grofzero you can pretty much replace this plugin with the above and be fine

[use-strict]

I'm trying to update to webpack 3 and getting the same deprecation warnings. I tried @dorianWB 's fix, but I get other errors from SourceMapDevToolPlugin now:

.../node_modules/webpack/lib/SourceMapDevToolPlugin.js:22
    if(asset.__SourceMapDevToolFile === file && asset.__SourceMapDevToolData) {
            ^

TypeError: Cannot read property '__SourceMapDevToolFile' of undefined
    at getTaskForFile (.../node_modules/webpack/lib/SourceMapDevToolPlugin.js:22:10)
    at chunk.files.forEach.file (.../node_modules/webpack/lib/SourceMapDevToolPlugin.js:91:21)
    at Array.forEach (native)
    at .../node_modules/webpack/lib/SourceMapDevToolPlugin.js:89:18
    at Array.forEach (native)
    at Compilation.<anonymous> (.../node_modules/webpack/lib/SourceMapDevToolPlugin.js:88:12)
    at Compilation.applyPlugins1 (.../node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (.../node_modules/webpack/lib/Compilation.js:670:11)
    at Compilation.applyPluginsAsyncSeries (.../node_modules/tapable/lib/Tapable.js:195:46)
    at self.applyPluginsAsync.err (.../node_modules/webpack/lib/Compilation.js:666:10)
    at next (.../node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.<anonymous> (.../node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
    at Compilation.applyPluginsAsyncSeries (.../node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (.../node_modules/webpack/lib/Compilation.js:662:9)
    at next (.../node_modules/tapable/lib/Tapable.js:202:11)
    at .../node_modules/extract-text-webpack-plugin/dist/index.js:244:13

[dorianWB]

@use-strict I haven't used that plugin, but I think it expects every chunk to have a js file, so the easiest thing might be to use the exclude property for your css chunks that go into the this plugin which I see is in the documentation for that plugin here: https://webpack.js.org/plugins/source-map-dev-tool-plugin/