Question

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

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

Answer 1

我参加聚会有点晚了，但我想我会使用webpack 4.23.1发布我的解决方案，以免klewis的回应。忍受，因为这是我的 first 堆栈溢出答案。

在构建了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>

希望此解决方案能够帮助其他人！

Answer 2

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

安装了Webpack 4.8.3以及HTML Webpack Plugin，全部通过npm。
构建了我的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个步骤。

希望这对其他人有帮助。

如何让Modernizr使用Webpack 4

2 个答案: