webpack不復制圖像

Question

我試圖導入已經捆綁在webpack中的本地軟件包。 當我構建一個應用程序時，除了Webpack不會從該內部程序包復制圖像，字體等外，其他一切看起來都不錯。 任何想法出什么事了嗎？

當我嘗試引用自定義庫時，該庫已捆綁在一起：

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

僅復制mylibrary.js。 因此父應用看起來像：

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

問題可以解決：

1. 通過增加加載程序限制，所有轉換為base64並包含在mylibrary.js中的內容都可以在我的父應用中找到
2. 復制插件，它可以從庫中復制字體，但是這種解決方案看起來很丑陋，因為使用庫的每個人都應該注意復制字體，圖像等。

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如何處理圖像，字體等。

這是一個使用引導程序並具有所需概念的模塊。

index.html也使用引導程序樣式和一個字形。 該字形（和所有引導程序）使用引導程序二進制文件中的一個圖像。

構建模塊之后，可以比較原始引導二進制文件（即node_modules/bootstrap/dist/css/bootstrap.css ）和捆綁的輸出文件（即dist/bundle.js ）中dist/bundle.js 。 您可以在這些文件中搜索glyphicons-halflings-regular.svg 。

簡單的webpack

1. 將圖像/字體復制到配置的（在加載程序配置中）輸出文件夾
2. 更新捆綁輸出文件（即js，css等）中的那些資源路徑

（1）需要由您通過裝載程序進行配置。 （2）將由webpack自動照顧，前提是該module.rules 。webpack config中的規則對於圖像/字體正常工作。

希望這可以使事情變得清晰。