如何在 Wordpress 主题中包含使用 Webpack 的外部库答案

【问题标题】：How do I include external libraries using Webpack in a Wordpress theme如何在 Wordpress 主题中包含使用 Webpack 的外部库
【发布时间】：2019-07-05 11:19:10
【问题描述】：

我决定使用 Webpack 和 Babel 来开发我的 Wordpress 主题，因为我想支持 ES6 功能并且仍然让我的网站在旧浏览器 (IE11) 上运行，以及其他好处，例如能够导入文件，这样我就不必将我的所有 JS 都放在一个大的 script.js 文件中（例如，对于使用 WebGL 的主题）。

这是我第一次设置和使用 Webpack，我很确定我已经以正确的方式进行了设置，因为我遵循了一些教程来做到这一点并且一切都很好，但我的主要问题是使用外部库。我有几个需要通过 NPM 安装的（即 Chart.js、Flickity、Magnific Popup 等）。我有一个主要的 script.js 文件，其中包含我的正常 Javascript 代码，并被捆绑到 bundle.min.js 中，这是与 Wordpress 一起排队的文件。

将外部库与我的 script.js 文件与 webpack 一起使用的最佳方式是什么？

目前我想出的最佳解决方案是按以下方式设置我的script.js 文件：

// Imports
import 'magnific-popup/dist/jquery.magnific-popup.min.js';
import 'flickity/dist/flickity.pkgd.min.js';
import 'chart.js/dist/Chart.bundle.min.js';



script.js code...

当我运行npm run build 时，一切正常，babel 和 uglify js 发挥它们的魔力来缩小代码并使代码在旧浏览器上运行，但出于某种原因，我觉得有更好的方法可以做到这一点，因为我做不到'在网上找不到任何关于它的信息。

这是最好的方法吗？

【问题讨论】：

标签： javascript wordpress webpack

【解决方案1】：

基本上，我们不需要在 webpack 中使用 babel-loader 来缩小/转译外部库（因为它们已经在内部支持所有浏览器）。对于这些文件，你可以使用 script-loader 代替 babel-loader。

另一种导入方式是使用 npm 添加这些库并在需要时导入它们。通过这种方法，webpack 将这些库包含在需要的地方，而不是每次都加载它，这是不必要的。

【讨论】：

好的，这正是我的想法，感谢您的评论！我会进一步研究这些选项，如果需要，我会回复你，你会推荐任何一种方法吗？
您是否有机会举例说明我将如何使用 script-loader 在我的 script.js 文件之前加载例如 chart.js？
我们可以像包含在 babel-loader { test: /public\/js\/lib(.+)\.js$/, use: { loader: 'script-loader', // For library files to load in window options: { sourceMap: isProduction, }, }, }, 中一样包含它注意：不要忘记在 babel-loader 配置中排除这些文件
嗯，很好，我现在明白了，所以我将它指向包含所有外部库 JS 文件的文件夹，它会在我的脚本文件之前加载它们，这是有道理的，谢谢！