代码之家 › 专栏 › 技术社区 › klewis

如何让Modernizer使用Webpack4

webpack-4 modernizr npm

1

klewis · 技术社区 · 8 年前

在我的Windows10机器上,我使用的是Git bash,并且我有一个成功的 npm start 为一个自定义的Web项目绑定几个CSS和JavaScript文件。但是我在努力让现代化者使用Webpack4.8.3。有人对这个具体的实现有什么成功的故事吗?寻找任何指导。我尝试了3种不同的新产品管理包,以使现代化集成,然后工作,但没有运气在后者。

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

2 回复 | 直到 8 年前

1

2

kaydop 7 年前

我参加聚会有点晚了,但我想我会用Webpack4.23.1发布我的解决方案,偏离Klewis的回复。忍受我,因为这是我的第一堆栈溢出应答。

在构建我的现代化构建文件并添加到我的 /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

1

klewis 8 年前

看来 HTML Webpack Plugin 可以提供帮助,使现代化连接(自然与插件,但这不是我的工作)。我花了一些时间想出一种替代方法,但这里是我所做的,并且很可能会为开发构建做进一步的工作…

已安装WebPack 4.8.3,以及 HTML Webpack插件全部通过NPM。
构造了我的 Modernizr js Build file
已将文件下载到我的网络包中 /src 目录

进入weback.config.js文件,告诉我的html webpack插件添加modernizer.js文件,就像这样…

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

然后像这样给index.html模板添加了必要的钩子…

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

最后,冉 npm start

现在,Modernizer正在为我的Web项目工作,并将类注入到我的 <head> 元素。2个简单的步骤,一旦你有了所有正确的依赖和配置设置到位。

希望这对其他人有帮助。