javascript - 我的 Webpack 文件加载器不会从 index.html 加载我的图像

Question

一旦我运行 webpack 构建，我试图将所有图像导出到我的lib文件夹（相当于 dist）。文件加载器成功加载了 css 中的所有图像，但不是从 html 加载。

我的文件夹结构是：

webpack.config.js
package.json
   /lib
   /src
    -- index.html
    -- /img 
    -- /css

我已经配置：html-loader file-loader并使用html-webpack-plugin

这是我的webpack.config.js

const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.resolve(__dirname, 'src', 'js', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: 'bundle.js'
    // publicPath: '/lib/'
  },
  devServer: {
    contentBase: path.join(__dirname, 'src'),
    port: 8080,
    https: true,
    host: 'dev.com'
    // publicPath: 'lib/'
  },
  devtool: 'cheap-eval-sourcemap',
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.scss',
      '.css',
      '.sass',
      '.woff',
      '.eot',
      '.otf',
      '.ttf',
      '.svg',
      '.png',
      '.jpg'
    ]
  },
  node: {
    fs: 'empty'
  },
  plugins: [
    new ExtractTextPlugin('bundle.css'),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    // new CopyWebpackPlugin([{ from: 'src/img/' }]),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: { comments: false },
      sourcemap: false
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash:6].[ext]'
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 2
              }
            },
            'postcss-loader'
          ]
        }),
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      {
        test: /\.woff$/,
        use: 'url-loader?limit=10240&mimetype=application/font-woff'
      },
      {
        test: /\.ttf$/,
        use: 'url-loader?limit=10240&mimetype=application/x-font-ttf'
      },
      {
        test: /\.eot$/,
        use: 'url-loader?limit=10240&mimetype=application/vnd.ms-fontobject'
      },
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  }
}

现在我用来CopyWebpackPlugin手动复制我的图像 理想情况下我希望能够优化我的图像，对它们进行散列等....../img/lib

这是我package.json的版本参考。

    {
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^6.2.10",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "body-parser": "^1.16.0",
    "css-loader": "^0.26.1",
    "ejs": "^2.5.5",
    "ejs-loader": "^0.3.1",
    "es6-promise": "^4.2.4",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "fabric": "^1.7.3",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "json-loader": "^0.5.4",
    "mysql": "^2.13.0",
    "node-fetch": "^1.7.3",
    "nodemailer": "^2.7.2",
    "nodemailer-smtp-transport": "^2.7.2",
    "postcss": "^5.2.11",
    "postcss-loader": "^1.2.2",
    "sequelize": "^3.30.0",
    "style-loader": "^0.13.1",
    "urijs": "^1.18.9",
    "url-loader": "^0.5.7",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^4.5.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0"
  }
}

非常感谢您！

标签： javascripthtmlimagewebpack