Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/365.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 网页包文件加载器输出损坏的图像_Javascript_Webpack_Webpack File Loader - Fatal编程技术网

Javascript 网页包文件加载器输出损坏的图像

Javascript 网页包文件加载器输出损坏的图像,javascript,webpack,webpack-file-loader,Javascript,Webpack,Webpack File Loader,我正在使用最新的文件加载程序。它将文件输出到指定的图像/css URL,但它们是损坏的图像 配置正在搜索sass文件,并用文件加载程序输出的新文件替换URL。该部分工作正常,但文件已损坏 const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractSass = new ExtractTextPlugin("./bundle.css"); var mainConfig = { entry: {

我正在使用最新的
文件加载程序
。它将文件输出到指定的
图像/css URL
,但它们是损坏的图像

配置正在搜索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"]
    }),

  ]
}

我通过删除文件加载器规则并用以下内容替换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/',
  },
}