загрузчик файлов webpack выдает поврежденные изображения - PullRequest
Новая
       10

загрузчик файлов webpack выдает поврежденные изображения

0 голосов
/ 24 апреля 2018

Использую последнюю версию 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"]
    }),

  ]
}

1 Ответ

0 голосов
/ 25 апреля 2018

Я заставил его работать, удалив правило загрузчика файлов и заменив правило загрузчика 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/',
  },
}
...