如何使用 webpack 2 加载 elm 代码中使用的图像？

Question

假设我有这个视图函数：

view: Model -> Html Msg
view model = 
    img [ src "static/img/elm.jpg" ] []

如何确保 webpack 2 知道它并按预期将其加载到 dist 文件夹中？

我找到了 elm-asssets-loader 包 here - 这是为这个场景构建的 - 但我不明白如何使用它。我的 webpack.config.js 是：

module: {
   rules: [
        ...
       {
           test: /\.elm$/,
            exclude: [/elm-stuff/, /node_modules/],
            use: [{
                    loader: 'elm-hot-loader'
                  },
                  {
                      loader: 'elm-webpack-loader?verbose=true&warn=true&debug=true'
                  },
                  {
                      loader: 'elm-assets-loader?module=MyAssets&tagger=AssetPath'
                  },

            ]
        },


  ]

}

我在扩展坞中看到了 elmAssetsLoader 和 fileLoader 自定义函数 - 但不清楚将它们放在哪里。我尝试将它们放在 module.exports object 内、modules 内、plugins 内。每次出现此错误时： Webpack has been initialized using a configuration object that does not match the API schema...

我也试过在 elm--webpack-loader 前后放置 elm-assets-loader。当放在 elm-webpack-loader 之后时 - 我在 Main.elm 文件中得到一个错误 - 这是有线的，因为 Main.elm 很好。没有错。

当我把它放在 elm-webpack-loader 之前时，绝对没有任何反应。甚至没有警告信息。

我也有 2 个模块，按照说明：

-- module MyAssets exposing (..)
--
-- type AssetPath
--     = AssetPath String
--
-- elmImage : AssetPath
-- elmImage =
--     AssetPath "../static/img/elm.jpg" -- this is the location of my image, and it's correct.
--

和带有图像的视图模块：

module View exposing (..)
view = 
   img [ src "what to put in here?" ] []

我是 webpack 的新手，这可能就是为什么我不明白我应该做什么。我想了解全局。连接方式。

我的 Html.Attributes.src 函数中应该包含什么？

我盲目地尝试了很多东西。 None 他们成功了。我缺乏直觉。

有人可以清楚地说明 elm image/assets loading 在 webpack 2 中的实际工作原理吗？谢谢:)

Answer 1

我会用 Copy Webpack Plugin 简单地复制这些图像。在你的 webpack 配置插件列表中推送这个：

new CopyWebpackPlugin({
    from: '',
    to: ''
})

另一种方法是管理来自 CSS 的图像并使用文件加载器：

{
   test: /\.(jpg|png)$/,
   use: `file-loader?${ objToUrlParameters({

          name: 'assets/img/[name].[hash:6].[ext]',
          publicPath: options.publicPath

        })
      }`
},

Answer 2

我最终使用了 CopyWebpackPlugin from here。

 plugins: [ 
    ...
    new CopyWebpackPlugin([
       { from: './src/static/img', to: 'img' }
    ])
 ]

我不使用我读过的异步内容 - 但足以满足我在这里的需要。

我将等待另一个答案将其标记为已接受 - 如果它可以提供使用加载程序的解决方案。在那之前，遇到这个问题的人可以尝试使用这个复制插件。

Answer 3

I also tried placing the elm-assets-loader before and after the elm--webpack-loader

elm-assets-loader 获取 elm-webpack-loader 的输出并在编译的 JavaScript 中查找资产路径。当 webpack 在 use 配置 from bottom to top 中应用加载器时，你需要像

use: [{
        loader: 'elm-hot-loader'
    },
    {
        loader: 'elm-assets-loader?module=MyAssets&tagger=AssetPath'
    },
    {
        loader: 'elm-webpack-loader?verbose=true&warn=true&debug=true'
    },
]

And when i place it before elm-webpack-loader absolutely nothing happens. Not even a warning message.

这可能是由于未在加载程序配置中指定正确的 package。如果您的 elm-package.json 的 repository 是 而不是 "https://github.com/user/project.git"，您需要指定包裹：

// when the repository is "https://github.com/alon/elmapp.git"
loader: 'elm-assets-loader?module=MyAssets&tagger=AssetPath&package=alon/elmapp'

这是必需的，因为 elm-assets-loader 寻找 JavaScript 代码如下：

_<package-user>$<package-project>$<module>$<tagger>("../static/img/elm.jpg")

如果包配置不正确，它将无法找到它应该找到的东西。

img [ src "what to put in here?" ] []

您需要一个辅助函数来提取包含在 AssetPath 变量中的字符串值。

module MyAssets exposing(AssetPath(..), path, elmImage)

path : AssetPath -> String
path (AssetPath str) =
    str

-- 

view = 
    img [ src <| MyAssets.path <| MyAssets.elmImage ] []

如何使用 webpack 2 加载 elm 代码中使用的图像？

how to load images used in elm code with webpack 2?

elm

webpack-dev-server

webpack-2