标签: webpack-file-loader

我使用html-loader加载我的html模板和文件加载器来加载模板中的图像.这在dev中运行得很好但是当我运行build:prod并运行输出时,我得到一个模板解析错误.

似乎所有angular2内置指令(例如,*ngFor,*ngIf)都被转换为全部小写(例如,*ngfor,*ngif),这些都是错误的例子.

我尝试创建一个单独的项目,这一次,不使用角度2的任何内置指令,一切正常.

我可以使用另一台装载机吗？如何正确加载这些模板以及这些模板使用的图像？

这是我的webpack.config

var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry:'./src/main.ts',

    output:{
        path:'./dist',
        filename:'app.bundle.js'
    },
    module:{
        loaders:[{test:/\.ts$/, loader:'ts-loader'},
        { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'html-loader' },
      {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader"},
      //{ test: /\.html$/, loader: 'raw-loader' },
      //{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
      ]

    /*   loaders: [
      // .ts files for TypeScript
      { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] }, …

我正在尝试使用webpack和webpack-dev-server在React组件中显示图像作为项目的一部分。

到目前为止，我已经完成了以下步骤：

• 使用npm安装文件加载器
• 更新了webpack.config.js以添加图像文件的加载器
• 将我想要的图像导入到组件中
• 在我的img标签中使用了导入

采取了这些步骤后，webpack编译失败并显示“找不到模块”错误：

ERROR in [at-loader] ./src/components/App.tsx:4:26
    TS2307: Cannot find module '../images/kitten-header.jpg'.

我的文件夹结构如下：

/dist
   /images
      kitten-header.jpg
   bundle.js
   bundle.js.map
/node_modules
   (content ignored for brevity)
/src
   /components
      App.tsx
   /images
      kitten-header.jpg
   /styles
      App.less
   index.tsx
index.html
package.json
tsconfig.json
webpack.config.js 

我添加到webpack.config.js的新加载器是：

test: /\.(jpe?g|gif|png|svg)$/, loader: "file-loader?name=./images/[name].[ext]"

我已经将图像文件导入了App.tsx中，如下所示：

import kittenHeader from '../images/kitten-header.jpg';

...并在img标签中使用了导入，如下所示：

<img src={ kittenHeader } />

注意：提供了webpack.config.js和App.tsx的全文，直到我更接近答案并意识到它们不相关为止（请参阅更新1）。

我假设我在导入的相对路径方面犯了一些非常琐碎的错误。可以想象，我尝试了多种选择。

谁能提供一些见识？

作为参考，由于我不断遇到与错误版本的Webpack有关的文章和问题，以下是我的版本：

• 反应15.5.4
• Webpack 2.6.1
• Webpack开发服务器2.4.5
• TypeScript 2.3.2

显然，我将需要提供d.ts文件或使用require语句。

差不多好了...

我正在设置Webpack 3并且当前正在配置静态图像的资产管理,我想将其从我的src文件夹复制到我的dist文件夹.我想保留我的/img文件夹的文件结构,因为它复制到dist文件夹,但我遇到的问题是我试图删除部分路径占位符.我想要达到的目标是什么？

我的规则如下:

  {
      test: /\.(png|jpe?g|gif|ico)$/,
      use: [{
          loader: 'file-loader',
          options: {
              name: '[path][name].[ext]?[hash]',
              //outputPath: 'img/'
          }
      }]
  }

它通过上下文抓取我的入口点文件中的图像:

require.context('./img/', true, /\.(png|jpe?g|gif|ico)$/);

但是当文件被复制时,因为我将[path]占位符作为名称的一部分,文件将类似/src/img/[name].[extension]?[hash].我想保持路径的其余部分完整,因为一些图像有路径/src/img/favicons/[name].[extension]?[hash],我觉得dist文件夹应该保持这种结构.正如您在代码中看到的那样,我尝试使用outputPath,但这只是将文件设置为/img/src/img/[name].extension?[hash].我也尝试过使用publicPath设置,但它似乎没有任何影响.最终目标是让上面提到的2个文件没有/src包含在此路径中的文件名部分.

使用 Webpack 4 以及 url-loader 或 file-loader 时，图像不会在浏览器中加载。小图像不在数据 URL 中（或者如果是，浏览器不会显示它们），并且文件加载器不会发出文件网络请求。

Nginx 在 处正确提供图像https://{server}/images/image_name.png，但没有https://{server}，并且在 Web 检查器网络面板中没有对图像进行网络调用。

到目前为止最好的猜测是 Webpack url-loader 或 file-loader 一定不会生成正确的 URL。在 app.bundle.js 中搜索 url 时找不到主机。我已经尝试了几天所有其他 stackoverflow 帖子中的 、 等publicPath组合，但没有任何效果。outputPath

除了搜索js之外，还有什么方法可以查看webpack生成的url吗？是不是webpack配置不正确？故障排除建议？

这是我在代码中处理图像的方法：

import nav_logo from "Images/white_nav_logo.svg";

<img src={nav_logo} />

这是我的 webpack.common.js：

module.exports = {
  mode: mode,
  entry: {
    app: ["./src/js/app.js"]
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: '[name].bundle.js',
    publicPath: '/',
    chunkFilename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(sc|c|)ss$/,
        issuer: {
          exclude: …

根据文件加载器使用文档，我应该能够加载如下图像：

test: /\.(png|jpg|gif)$/,
use: [
  {
    loader: 'file-loader',
    options: {}  
  }
]

后来通过：

import img from './file.png';

这是我的webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true } …

我有一个 React 项目，其中使用 webpack 3.10.0 和文件加载器 1.1.6 将一些图像和 json 文件移动到我的分发文件夹中。

Webpack 按预期发出文件，但 React 收到我的 json 和图像资源的错误 url

我的标记看起来像：

<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" \nalt="Hello World!!">\n

但应该是：

<img src="/assets/images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" \nalt="Hello World!!">\n

我的文件夹结构如下所示：\n\nC:.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80dist\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80assets\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80css\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80data\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80src\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80css\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80data\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80js\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80actions\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80components\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80containers\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80reducers\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80tests\n

我认为文件加载器 publicPath 应该解决这个问题，但看来我要么误解了，要么我的配置有问题。\n有好心人可以帮帮我吗？

webpack.config.js

var path = require(\'path\');\nconst ExtractCSS = require("extract-text-webpack-plugin");\n\nmodule.exports = {\n  entry: [\n    \'./src/js/index.js\'\n  ],\n  output: {\n    path: path.resolve(__dirname, \'dist/assets/js\'),\n    filename: \'bundle.js\'\n  },\n  module: {\n    rules: [\n …

我正在尝试使用 Webpack 4 将我的图像文件夹从我的 src 文件夹导入（移动）到我的 dist 文件夹，但与 Gulp 不同，这个任务在 Webpack 中看起来非常复杂，即使我什至没有尝试弄乱位于此刻，我只想 Webpack 加载它们并将它们放在我的 dist/image 文件夹中。

我看到人们在他们的 index.js 上逐个图像导入，我不相信这是唯一的解决方案，有没有一种方法可以将整个文件夹移动到 dist / production 文件夹，而不必在索引.js ?

这是我目前的 webpack 配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: path.resolve(__dirname, 'src/js/scripts.js'),
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [
            //JS
            {
                //Tipo de Archivo quiero reconocer
                test: /\.js$/,
                exclude: /node_modules/,
                //Que Loader se encarga del tipo de extension de …

我在url-loader我的 webpack 构建过程中使用它，它为我import在我的 JS 文件中的任何图像文件正确移动图像文件（或创建 Base64 DataURL 字符串），例如：

import appleTouchIcon from '../../static/images/apple-touch-icon.png';

但是，当在 NodeJS（使用 Express）上进行服务器端渲染时，我看到以下错误：

/Users/jfender/Workspace/generetic/static/images/apple-touch-icon.png:1
(function (exports, require, module, __filename, __dirname) { ?PNG
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.newLoader [as .js] (/Users/jfender/Workspace/generetic/node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

这是我的 webpack 配置：

module.exports = {
  entry: './applications/responsive/browser.js',
  output: {
    path: path.resolve(__dirname, 'static'),
    publicPath: …

我是使用 Typescript/React/Redux/等构建浏览器游戏的新手。并且正在尝试为游戏实现音频。我一直在尝试以与导入图像和 json 文件相同的方式导入音频文件，但到目前为止无济于事。使用“文件加载器”将 mp3 添加到我的 webpack 配置后，我尝试导入一个示例 mp3 文件，该文件与我能够成功导入的图像文件放在同一位置，但是当我尝试运行 webpack 时，它告诉我找不到 mp3 模块。

示例文件

import React from "react";
import spriteSheet from "../assets/spritesheet.gif";
import audioFile from "../assets/pillRotate.mp3";

import { Gameboard } from "./Gameboard";

export class MainGameComponent extends React.Component {
    render() {
        return (
            <div>
                <img id="spriteSheet" src={spriteSheet} hidden={true} />
                <audio src={audioFile}></audio>
                <Gameboard />
            </div>
        )
    }
}

export default MainGameComponent;

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    resolve: …

我正在使用 ace 代码编辑器包，它在它的包中使用了一个 webpack-resolver.js 文件，该文件file-loader!在每个 require 语句中都有内联，例如

这适用于我的 webpack 配置，并且在使用它时一切都很好，但是当我去使用 jest 时，它无法识别文件加载器！并失败

require('file-loader!./src-noconflict/ext-beautify.js')

jest 配置中有什么东西可以解决这个问题吗？

我收到以下错误

 Cannot find module 'file-loader!./src-noconflict/ext-beautify.js' from 'webpack-resolver.js'