如何让 Modernizr 与 Webpack 4 一起工作

Question

在我的 windows 10 机器上，我正在使用 Git Bash，我有一个成功的 npm start Webpack 捆绑了几个 CSS 和JavaScript 个自定义 Web 项目的文件。但我正在努力让 Modernizr 与 Webpack 4.8.3 一起工作。有没有人有关于这个具体实施的任何成功案例？寻找任何指导。我已经尝试了 3 个不同的 npm 包来集成 modernizr 然后工作，但后者没有运气。

非常感谢任何示例步骤和/或说明。

Answer 1

看来 HTML Webpack Plugin 可以提供连接 Modernizr 的帮助（自然是使用插件，但对我来说不起作用）。我花了一些时间来找出替代方法，但这是我所做的并且可能会继续推进开发构建...

通过 npm 安装了 Webpack 4.8.3 以及 HTML Webpack Plugin。
构建了我的 Modernizr js Build file
已将文件下载到我的 Webpack /src 目录

进入我的 weback.config.js 文件并告诉我的 HTML Webpack 插件像这样添加我的 Modernizr.js 文件...

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

然后像这样向我的 index.html 模板添加必要的挂钩...

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

最后，运行npm start

现在 Modernizr 正在为我的 Web 项目工作，并将类注入到我的 <head> 元素中。设置好所有正确的依赖项和配置后，只需 2 个简单的步骤。

希望这对其他人有所帮助。

Answer 2

我来晚了一点，但我想我会 post 我的解决方案使用 webpack 4.23.1 来响应 klewis 的响应。请耐心等待，因为这是我的 first 堆栈溢出答案。

在构建我的 Modernizr 构建文件并添加到我的 /src 目录后，我没有使用 HTML Webpack 插件，而是像这样设置了另一个 ...

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

然后将输出文件名更改为 filename: '[name].js'，然后生成的文件与我的 bundle.js 一样 modernizr.js。

该文件现在可以挂接到我的模板中：<script src="/scripts/bundle.js"></script>

希望这个解决方案能够帮助到其他人！

如何让 Modernizr 与 Webpack 4 一起工作

How to get Modernizr working with Webpack 4

npm

modernizr

webpack-4