alexpalombaro / modernizr-webpack-plugin Goto Github PK

I might be missing something. But this creates the modernizr file correctly but does not add it to my template...?

const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

...

plugins: [
    new ModernizrWebpackPlugin({
      htmlWebpackPlugin: true,
      filename: utils.assetsPath('js/modernizr.[chunkhash].js'),
      minify: {
        output: {
          comments: true,
          beautify: true
        }
      }
    }),

What am I doing wrong?

Thanks!

hi @alexpalombaro
I am about to release html-webpack-plugin 2.

It would allow you to alter the html/assets with events:
https://github.com/ampedandwired/html-webpack-plugin/tree/feature/loaders#events

There is also a unit test which shows how you could add an additional javascript from another plugin:
https://github.com/ampedandwired/html-webpack-plugin/blob/feature/loaders/spec/HtmlWebpackPluginSpec.js#L682

do you have time to adapt your plugin for 2.x?

using 1.0.7 of this plugin, I get this warning in build output

10% building modules 3/3 modules 0 active(node:86959) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
at ModernizrPlugin.apply (/Volumes/devhd/dev/securityportal/sp-client/node_modules/modernizr-webpack-plugin/index.js:105:12)
at webpack (/Volumes/devhd/dev/securityportal/sp-client/node_modules/webpack/lib/webpack.js:37:12)
at startDevServer (/Volumes/devhd/dev/securityportal/sp-client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:16)
at processOptions (/Volumes/devhd/dev/securityportal/sp-client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:361:5)
at Object. (/Volumes/devhd/dev/securityportal/sp-client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:504:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3

When building with process.env.NODE_ENV=production, I'm getting an "undefined is not a function" error.

 48% 166/260 build modules{ [Error: TypeError: undefined is not a function
    at ModernizrPlugin.minifySource (.../node_modules/modernizr-webpack-plugin/index.js:58:30)
] originalError: [TypeError: undefined is not a function] }

The error is occurring on the Object.assign in the ModernizrPlugin.prototype.minifySource call.

The filepath injected into the HTML is missing the outputPath prefix. The bundled file is put into the right directory, but the path in the html file is wrong. (meep.js is my app-bundle)

I don't have a reproducible case yet, should have it soon (at work now, I'll get to it tonight).

The build crashes with no errors if I have multiple instances of HtmlWebpackPlugin in plugins. Exit code is zero, but there is no emit phase for webpack. No idea what crashes 😆

This is using a pretty advances setup, as noted I'll try to create a reproducible smaller case tonight

Instead of creating a separate chunk and linking to it, I would like to insert Modernizr directly into the HTML. I have achieved this with this ugly workaround:

// File: webpack.config.js

const modernizrPlugin = new ModernizrWebpackPlugin({
    'feature-detects': [
        'css/boxsizing',
        'css/borderradius',
        'css/boxshadow',
        'css/flexbox',
        'css/calc',
        'history'
    ],
    filename: 'modernizr-[chunkhash].js',
    minify: PROD
});

const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.pug',
    options: {
        modernizrPlugin: modernizrPlugin
    }
});

doctype html5

- modernizrPlugin = htmlWebpackPlugin.options.options.modernizrPlugin

html
    head
        title Avesta Summit

        script!= modernizrPlugin.modernizrOutput

    body
        div#app

This works, but the plugin still produces a file and adds it to the dist directory. It would be neat to have an option to inject the chunk directly into the HTML and not write the chunk to a file.

As per Modernizr/Modernizr#2331 IntersectionObserver has been added to modernizr main package.

Can the dependency be updated to include this and other latest improvements?

Should the plugin add the CSS classes to html element ?

Thanks.

Latest stable version of Modernizr is 3.5.0 which was released in April of last year. Can we get an update with the latest package version available?

Is it required to also install modernizr as well as the plugin?

Following the directions according to the README, I could not understand why a modernizr-bundle.js file was not being created. Finally ran npm install modernizr --save-dev and was able to generate the file as expected.

If it is also required to download and install Modernizr into the project, please reference this in the directions in README.

I have Webpack 4.8.3 installed, along with modernizr-webpack-plugin version 1.0.7. I have followed all the instructions on your npm page in regards to how to install it. The process was easy for me. But when I load project through the browser after a successful npm start action, no classes are added to the DOM from modernizr.

I tried clearing my cache, restarting my server and getting ideas from other web pages. No luck.

Please help, you're my only hope.

Using "modernizr-webpack-plugin" as a dependency breaks NPM security audit with 1 moderate and 2 low severity vulnerability. Should update lodash and clean-css packages to their most recent versions.

I've yet to get to the bottom if this, but it seems as though at some point the modernizr-bundle.js output looses a call to setClass(classes).

A test is to compare the output of $ modernizr -c config-all.json and what's produced by this plugin.

Do you think it's worth adding customizr support, a little like:
https://github.com/andersaloof/modernizr-auto-loader

Difference being that's a loader, and this is a plugin. Therefore, it will read the actual output and create a modernizr build from it. The reason being (unless I'm misunderstanding the correct process):

• I'm effectively creating a jquery plugin as an NPM package, which needs feature detection.
• I therefore add Modernizr references
• Any projects depending on my NPM package will therefore require Modernizr, but in order to create a custom build, they would need to include my package in node_modules in their file search. To me, this sounds like bad practise as I would expect anyone using my package to know to do that?

If the plugin inspected the chunk output and used customizr, then I expect this would cover any situation where either the local project had used Modernizr, or a dependency had.

As mentioned in Modernizr/Modernizr#2499 this project doesnt work anymore with the latest modernizr version since this one here still relies on old and unmaintained node versions.

Due to its updated dependencies modernizr needs at least node >= 10.

So I am wondering if anyone still maintains it?

with the new version compiler.plugin is no longer available (use hooks instead) So this plugin does not work.

Can we update it?

The standard Modernizr.js sets css classes to html for all the features supported, like touch. This lib does not.

Is there a way to configure this?

Looks like modernizr-webpack-plugin does not adhere to webpack naming conventions for filename string substitution. Per webpack conventions:

[hash] - build hash
[chunkhash] - file hash

At present, modernizr-webpack-plugin only supports filename string substitution [hash], but instead provides a chunkhash instead of using the build's hash (#6). It would be great if modernizr-webpack-plugin could get behind the webpack naming conventions and use [chunkhash] instead of [hash] for current functionality (as well as offer the correct [hash] string subtitution functionality).

There is a major undocumented side-effect that occurs with importing modernizr-webpack-plugin, namely it sets NODE_ENV to development if it's not already set.

See here for broken line.

This is a major anti-pattern. If NODE_ENV needs to be defined for the plugin to work properly, then it should set it when the plugin is constructed, and even then, it should be documented somewhere that this is happening.

Is it possible to include the output of ModernizrWebpackPlugin in the main output file rather than creating a separate modernizr.bundle.js file?