Question

我尝试导入已经捆绑在webpack中的本地包。当我构建一个应用程序时，一切看起来都不错，除了webpack不从该内部包复制图像，字体等。任何想法出了什么问题？

当我尝试引用我的自定义库时，它已经捆绑了：

- dist
-- asdfjlsjdflasdjflsdaf.ttf
-- sdjflsjdfasjdflsjdfsd.eot
-- mylibrary.js

仅复制mylibrary.js。所以父app看起来像：

- dist
-- mylibrary.js
-- parentapp.js
- packages
-- mylibrary
--- src...
--- dist...

问题可以解决：

通过增加加载程序限制和转换为的所有内容我的父应用程序
复制插件，从mylibrary复制字体，但这个解决方案看起来很难看，因为使用mylibrary的每个人都应该关心复制字体，图像等。

Answer 1

使用webpack复制图像和字体的方法是使用GlobCopyWebpackPlugin。

它是如何工作的（我不太确定你当前的webpack配置是什么样的）但是让我们看看它是否有空白，看看这是否对你有帮助。因此，您可以为不同的环境保留单独的webpack文件 - 比如说现在是prod和dev。一旦创建了webpack.config.dev.js，就可以在“plugins”属性中使用GlobCopyWebpackPlugin。它看起来如下所示：

    new GlobCopyWebpackPlugin({
        "patterns": [
            "Assets"
        ],
        "globOptions": {
            "cwd": path.join(process.cwd(), "src"),
            "dot": true,
            "ignore": "**/.gitkeep"
        }
    }),

“资产”是您保存字体，图标，多媒体等的文件夹。

然后您可以在package.json

中配置您的任务

"scripts": {
    "serve": "npm run -s generatelocalefiles && node --max_old_space_size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.dev.js --port=4300",
    }

文件夹结构如下所示（以防万一你想知道）

-src
  -app
  -assets
-package.json
-webpack.config.dev.js
-webpack.config.prod.js

希望这有帮助！

Answer 2

理解的最佳方式是了解webpack如何处理图像，字体等。

Here是一个使用bootstrap并具有所需概念的模块。

index.html也使用bootstrap样式和一个字形。字形（以及所有引导程序）使用来自引导程序二进制文件的一个映像。

构建模块后，您可以比较原始引导二进制文件（即node_modules/bootstrap/dist/css/bootstrap.css）中的图像路径和捆绑的输出文件（即dist/bundle.js）。您可以在这些文件中搜索glyphicons-halflings-regular.svg。

webpack简单

将图像/字体复制到配置的（在加载程序配置中）输出文件夹
更新捆绑输出文件中的资源路径（即js，css等）

（1）上面需要你通过装载机为你配置。（2）如果webpack配置中的module.rules对图像/字体正常工作，将由webpack自动处理。

希望能让事情变得清晰。

webpack不复制图像

2 个答案: