webpack-dev-server - 如何使用 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 对象 中、modules 中、plugins 中。每次出现此错误时:Webpack 已使用与 API 架构不匹配的配置对象进行初始化...

我还尝试将 elm-assets-loader 放置在 elm--webpack-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.
--

以及带有图像的 View 模块:

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

我是 webpack 的新手，这可能就是为什么我不知道我应该做什么。我想了解大局。事物是如何连接的。

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

我盲目地尝试了很多东西。他们都没有工作。我缺乏直觉。

有人可以清楚地说明 elm 图像/ Assets 加载 在 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

        })
      }`
},