如何让 Modernizr 与 Webpack 4 一起工作答案

【问题标题】：How to get Modernizr working with Webpack 4如何让 Modernizr 与 Webpack 4 一起工作
【发布时间】：2018-11-03 03:44:58
【问题描述】：

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

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

【问题讨论】：

标签： npm modernizr webpack-4

【解决方案1】：

我参加聚会有点晚了，但我想我会使用 webpack 4.23.1 发布我的 klewis 响应的解决方案。请耐心等待，因为这是我的第一个堆栈溢出答案?。

在构建我的 Modernizr 构建文件并添加到我的 /src 目录后，我没有使用 HTML Webpack 插件，而是设置了另一个 entry point for 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>

希望这个解决方案能够帮助别人！

【讨论】：

谢谢。我喜欢你的方法

【解决方案2】：

看来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 个简单的步骤。

希望这对其他人有帮助。

【讨论】：

我怎样才能在 JavaScript 文件中 import 它？
您需要将 Modernizr 加载到项目的头部，而不是主体内。因此，如果您不使用 HTMLWebpackPlugin 将块包加载到页面头部，任何将其导入 JavaScript 文件的尝试都可能导致不良结果 - npmjs.com/package/html-webpack-plugin
在这种情况下，我必须将它单独放入 WordPress 中。但显然目前没有办法将生成的 Modernizr 构建文件直接导入另一个 JavaScript 文件。