Javascript 网页包-复制图像文件

我目前正在使用Webpack打包我们的Angular2应用程序，我面临一个问题

我已经阅读了一些文档，但我无法实现如何使用文件加载器复制输出目录中的一些文件

以下是我当前的文件层次结构：

config
  | - webpack.common.js   
app        
  |- static
      | - css
           | - ...
      | - fonts
           | - ...
      | - img
           | - someimage.png
           | - anotherimage.png
  |- main.ts

以及（完整）webpack.common.js：

var path = require("path")
var webpack = require("webpack")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {    
    entry: { 
      app: './app/main.ts',
    },
    output: {
        filename: 'js/[name].js',
        path:'./built',
        chunkFilename: 'bundles/[id].chunk.js'
    },


    module: {
        loaders: [
        {
            test: /\.ts$/,
            loader: 'ts',
            exclude:'./out/'
        },
        {           
             test: /\.(jpe?g|png|gif|svg)$/i,
             include: [
                 path.resolve(__dirname, '/app/static/img/'),
              ],
             loader: 'file?name=[path][name].[ext]&context=./src',

        }
        ]
    },

     resolve: {
         extensions: ['', '.js', '.ts', '.gif']
    },


     plugins: [
         new HtmlWebpackPlugin({
             template: './index.html'
         })
    ]
}

要执行webpack，请播放以下命令：

webpack --config Config/webpack.common.js  --bail

ts文件被正确地转换为javascript并复制到输出目录中，index.html文件也存在，但没有我的图像文件

我认为我的配置文件有问题，但我看不出有什么问题。我在这上面敲了好几个小时，所以任何帮助都将不胜感激

---

谢谢

您应该使用url加载程序加载图像。下面给出了示例代码

{
  module: {
    loaders: [
      { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' }
    ]
  }
}

您是指条目js文件中的gif文件还是相应的css/sass文件

   entry: { 
      app: './app/main.ts',
    }

Webpack将加载入口点中具有引用的所有文件。如果所有文件不在一个入口点中。然后可以添加多个入口点，如下所示

   entry: { 
      app: './app/main.ts',
      image: './app/something.ts'
    }

---

另外，我会将webpack.config.js文件直接放在根目录中，以便更好地访问整个生态系统。尝试将其从配置文件夹移动到根文件夹。

为图像创建单独的入口点可能不是您想要的，这取决于您如何构建项目的CSS部分。作为替代方法，您可以使用或grunt/gulp任务复制静态文件。

我尝试使用url加载程序，但结果完全相同。它的行为就像没有找到gif文件一样（我在日志中没有提到这个文件-即使在详细模式下）。可能路径和/或上下文定义有问题。这意味着它适用于其他图像类型。只有gif文件有问题吗？不，它不适用于我的任何类型的“静态”文件（不仅仅是gif）。例如，woff文件不是复制品；根据您的建议，我添加了一个包含单个图像的条目，文件已成功复制（使用文件加载器和url加载器）

条目：{appli:'./app/main.ts'，图像：'./app/static/img/background.png'

}。谢谢你。您不必仅为图像创建另一个入口点。我确信您一定是在less/sass/css文件中使用了这些图像。然后，您需要将该特定文件添加到您的入口点/app/main.ts，然后这些图像将自动传输。