webpack 文件加载器输出损坏的图像

Question

我正在使用最新的 file-loader。它像指定的那样将文件输出到 images/css-urls，但它们是损坏的图像。

配置正在搜索 sass 文件并将 url 替换为文件加载器输出的新文件。该部分有效，但文件已损坏。

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin("./bundle.css");

var mainConfig = {
  entry: {
    "app": [
      "./app/main.ts",
      "./static/scss/main.scss",
    ],
    "vendor": "./app/vendor.ts",
    "polyfills": "./app/polyfills.ts",
  },
  output: {
    path: path.resolve(__dirname, "static"),
    filename: "[name].js"
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  devtool: "source-map",
  module: {
    rules: [{
      test: /.*\.(gif|png|jpe?g|svg)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'images/css-urls/',
          }
        },
      ]
    }, {
      test: /\.(scss|css)$/,
      use: extractSass.extract({
        use: [{
          loader: "css-loader",
        }, {
          loader: "sass-loader",
        }],
        // use style-loader in development
        fallback: "style-loader"
      })
    }, {
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      loader: "url-loader",
    }, {
      test: /\.ts$/,
      loaders: [
        {
          loader: "awesome-typescript-loader",
          options: { configFileName: root("./", "tsconfig.json") }
        } , "angular2-template-loader"
      ]
    }, {
      test: /\.html$/,
      loader: "html-loader"
    }]
  },
  plugins: [
    extractSass,

    new webpack.ContextReplacementPlugin(
      // The (\|\/) piece accounts for path separators in *nix and Windows
      /angular(\|\/)core(\|\/)@angular/,
      root("./app"), // location of your src
      {} // a map of your routes
    ),

    new webpack.optimize.CommonsChunkPlugin({
      name: ["app", "vendor", "polyfills"]
    }),

  ]
}

Answer 1

我通过删除文件加载器规则并用这个

替换url-加载器规则来让它工作

{
  test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
  loader: "url-loader",
  options: {
    limit: 8192,
    fallback: "file-loader",

    // fallback options
    name: '[name].[hash].[ext]',
    outputPath: 'images/css-urls/',
  },
}

webpack 文件加载器输出损坏的图像

webpack file-loader ouputting corrupted images

javascript

webpack

webpack-file-loader