alexpalombaro / modernizr-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWCompile custom modernizr build during webpack compile
License: MIT License
Compile custom modernizr build during webpack compile
License: MIT License
with the new version compiler.plugin
is no longer available (use hooks
instead) So this plugin does not work.
Can we update it?
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?
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.
Should the plugin add the CSS classes to html element ?
Thanks.
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 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.
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?
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.
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
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
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):
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.
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 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!
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?
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?
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?
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.
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).
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.