2

On my windows 10 machine, I'm using Git Bash, and I have a successful npm start of Webpack bundling several CSS and JavaScript files for a custom web project. But I am struggling in getting Modernizr to work at all with Webpack 4.8.3. Does anyone have any success stories on this specific implementation? Looking for any guidance. I have tried 3 different npm packages to get modernizr integrated and then working, but no luck on the latter.

Many thanks for any example steps and / or instructions.

klewis
  • 7,459
  • 15
  • 58
  • 102

2 Answers2

4

I'm a little late to the party, but I figured I would post my solution going off of klewis' response, using webpack 4.23.1. Bear with me, as this is my first stack overflow answer .

After constructing my Modernizr build file and adding to my /src directory, instead of using the HTML Webpack Plugin, I set another entry point for webpack like so...

 entry: {
  bundle: './app/src/scripts/main.js',
  modernizr: './app/src/scripts/lib/modernizr_custom.js'
},

Then changed the output filename to filename: '[name].js', which then the built file is with my bundle.js as modernizr.js.

That file can now be hooked into my templates: <script src="/scripts/bundle.js"></script>

Hope this solution is able to help someone else!

kaydop
  • 41
  • 1
  • 2
1

It appears that HTML Webpack Plugin can provide assistance with getting Modernizr wired up (naturally with a plugin, but that wasn't working for me). It took me some time to figure out an alternative approach, but here is what I did and will probably do moving forward for development builds...

  • Installed Webpack 4.8.3, along with the HTML Webpack Plugin, all via npm.
  • Constructed my Modernizr js Build file
  • Downloaded the file into my Webpack /src directory

  • Went into my weback.config.js file and told my HTML Webpack Plugin to add my Modernizr.js file like so...

        new HTMLWebpackPlugin({
        template: 'src/index.html',
        links: [
            'modernizr.js'
          ]
    }),

  • Then added the necessary hook to my index.html template like so...

<head> <script src="<%= htmlWebpackPlugin.options.links[0] %>"></script> </head>

  • Finally, ran npm start

and now Modernizr is working for my web project and injecting classes into my <head> element. 2 easy steps once you have all the right dependencies and configurations set in place.

Hopefully this is a help for others.

klewis
  • 7,459
  • 15
  • 58
  • 102
  • How can I `import` it in a JavaScript file instead? – strarsis Nov 16 '18 at 00:42
  • 2
    You're gonna want to load Modernizr into the head of your project, not within the body. So any attempt of importing it into your JavaScript file may lead to bad results, if you do not use HTMLWebpackPlugin to load a chunk bundle into the head of your page - https://www.npmjs.com/package/html-webpack-plugin – klewis Nov 16 '18 at 15:39
  • In this case I would have to enqueue it in WordPress separately. But apparently there is currently no way for importing the generated Modernizr build file directly in another JavaScript file. – strarsis Nov 16 '18 at 19:31