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-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.
--

以及带有图像的视图模块：

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

我是webpack的新手，可能为什么我不应该知道该怎么做。我想了解大局。事情如何有线。

我的Html.Attributes.src功能应该包含哪些内容？

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

有人可以明确说明这个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

我还尝试在elm-webpack-loader
之前和之后放置elm-assets-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'
    },
]

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

这可能是因为未在加载程序配置中指定正确的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会查找看起来像的代码：

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

如果未正确配置包，则无法找到它应该找到的内容。

img [src“这里放什么？” ] []

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

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

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

-- 

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

Answer 3

我最终使用CopyWebpackPlugin from here。

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

我不会使用我所读过的异步内容 - 但是对于我在这里需要的东西来说已经足够了。

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

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

3 个答案: