标签: webpack-file-loader

我正在开发一个角度应用程序,它需要将html文件提取为纯HTML文件,同时应检查是否<img src="...">需要这些图像(作为资源).此外,图像基于根路径(so /images/something.png),它们需要相对于webpack context设置(基本路径)进行解析.

我怎样才能做到这一点？无法让html-loader与文件加载器很好地协同工作.由于前者输出一个JS文件(带有require语句),后者需要一个普通的HTML文件.

最近几天我在学习使用 webpack，我对 webpack file-loader 感到困惑。据我所知，我们可以使用文件加载器来复制图像等文件，并对文件名进行自定义或编码并获得返回的路径。但是我不知道为什么我们需要文件加载器，返回的路径是做什么用的？我认为 file-loader 可以做的那些事情也可以很容易地手动完成，我错了吗？我是 webpack 的新手，我在网上搜索过，但一无所获。任何帮助表示赞赏，提前致谢！

我用于webpack一个小型应用程序，到目前为止它运行得很好，除了在显示图像时遇到问题 - 我得到了 404。

这是我的 webpack 配置：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
   entry: {
     index: './src/index.js'
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].js'
   },
   module: {
    rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
            MiniCssExtractPlugin.loader,
              { loader: 'css-loader', options: { importLoaders: 2, sourceMap: true } },
              { loader: 'postcss-loader', options: { sourceMap: true } },
              { loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true } },
            ]
        }, …

使用webpack时，加载.otf字体文件的适当方法是什么？webpack.config.js基于以下示例，我已经尝试过多次在自己的规则中包含规则，但均未成功：

{ test: /\.(eot|svg|ttf|otf|woff)$/, use: 'file-loader' }
//or
{ test: /\.(eot|svg|ttf|otf|woff)$/, use: 'url-loader' }
//or
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, use: 'file-loader' }
//...etc

我webpack.config.js在以下文件中设置了其他文件类型，这些文件可以正常运行：

module.exports = {
    //...
      module: {
        rules: [
          { test: /\.(js)$/, use: 'babel-loader' },
          { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
          { test: /\.(jpe?g|png|gif|svg|xml)$/i, use: 'file-loader'}
        ]
      },
    //...
}

尽管我作了种种尝试为.otf文件添加另一个规则/案例的尝试，但我始终会遇到以下错误：

模块解析失败：... / fonts / [我的字体名称] .otf意外字符''（1：4）您可能需要适当的加载程序来处理此文件类型。

我已经fonts在根目录的文件夹中添加了.otf文件，在index.css中，我具有：

@font-face {
  font-family: 'name-of-my-font';
  src: url('fonts/name-of-my-font.otf'),
  format('opentype');
}

有没有人遇到过类似的问题并找到了解决方案？

谢谢，奥斯丁

根据评论的要求，webpack.config.js …

我是 nodejs 的新手，在尝试使用 sass 时遇到问题。

以下信息纯属虚构，但代表实际情况。

场景：

我有以下文件夹结构：

frontend/
 - scss/
  - style.scss
 - main.js
webpack.config.js

目标：

我想编译style.scss到style.css使用的WebPack并把它里面dist/frontend/css/的目录，所以应该得到的这条道路：dist/frontend/css/style.css与创建以下文件夹结构：

dist/
 - frontend/
   - scss/
     - style.scs
   - main.js
frontend/
     - scss/
      - style.scss
     - main.js
webpack.config.js

代码：

主文件

import `style from "./scss/style.scss";`

webpack.config.js

 module.exports = {
     mode: "development",
     entry: {
       main: "./frontend/main.js"
     },
     output: {
      path: path.join(__dirname, "/dist/frontend"),
      publicPath: "/",
      filename: "[name].js"
     },
     module: {
       rules: [ 
        {
           test: /\.(s*)css$/,
           use: [ …

它是使用 Typescript、React 和 webpack 创建的 Web 应用程序。我想通过 webpack 使用 svg 文件。然而，我得到了

    TS2307: Cannot find module '~/images/slide.svg'. 

打字稿文件放在/frontend/src/，打字稿文件构建成功。

然后，我在网站上尝试了一些解决方案。但我无法解决这个问题。我的尝试简要描述如下。

我添加了一个文件，其中在“typeRoots”中定义了类型。配置文件

{
  "compilerOptions": {
    "outDir": "./app/assets/javascripts/bundles",
    "sourceMap": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es6",
    "jsx": "react",
    "removeComments": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./frontend/src/*"]
    },
    "typeRoots": ["types", "node_modules/@types"]
  },
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "cacheDirectory": "tmp/build_caches/awesome-typescript-loader"
  },
  "include": [
    "./frontend/src/*"
  ],
  "exclude": [
    "node_modules",
    "bundles",
    "**/*.js"
  ]
}

类型/图像.d.ts

declare module '*.svg' { …

我应该通过导入相对路径还是通过引用文件 URL 来加载节点中的照片，以及如何从相对路径正确加载照片？

目前我正在使用 express 提供静态文件：

server.use(express.static(__dirname + '/../public'));

并通过引用文件 URL 加载照片：

  <img src='/images/tom.jpg'/>

我有一个 webpack 配置设置为在 (png|jpg|gif) 上使用文件加载器，并且 webpack 文档说，使用文件加载器，您可以从相对路径 ( https://webpack.js.org)导入照片/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx）：

import img from './file.png'

使用此配置（这是我正在使用的配置）：

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

但是，当我尝试从其相对路径导入图像时：

//import   
import img from '../../public/images/tom.jpg';

//render
<img src={img}/>

我收到此错误：

/Users/ryan/Desktop/Df/Coding/ryanchacon.io/node_modules/babel-core/lib/transformation/file/index.js:590 抛出错误；^

语法错误：/Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg：意外字符“？” (1:0)

1 | ？？？

但是如果我发出“从相对路径导入”，启动我的服务器，然后添加相对导入，图像将从其相对路径加载。但是，如果我重新启动服务器，错误会再次抛出。

因此，我引用文件 URL 来解决此错误，但我不确定如何使用我的 webpack/node 配置从它们的相对路径正确加载文件。

目前，我正在运行 node v8.6.0、webpack …

我无法获取webpack（3.10）文件加载器路径来满足需要。.这是我的webpack.config.js的一部分

// ...

const images = {
  test: /\.(jpg|png|svg)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: 'images/[path][name].[hash].[ext]',
    },
  },
}

//...

const config = {
  entry: {
    App: './public/assets/js/main.js',
  },
  output: {
    path: path.resolve(__dirname, 'public', 'assets', 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [javascript, styles, images],
  },
  plugins: [new ExtractTextPlugin('main.css'), uglify],
}

//...

我希望将图像放入其中，/public/assets/dist/images/XXX.svg但它们已被装入/public/assets/dist/images/public/assets/images/XXX.svg

我真的不明白...谢谢您的所有帮助。

我已经尝试了几个小时，但在使用 webpack导入材料设计标志性字体时没有成功。

我的 webpack.config.js

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        },
        {
            test: /\.(svg|eot|woff|ttf|svg|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: "fonts/[name].[ext]"
                    }
                }
            ]
        }
    ]
...

我的 app.js 文件

import 'material-design-iconic-font/dist/css/material-design-iconic-font.css';

我的 webpack 输出控制台

Built at: 2018-4-3 12:48:40
                                  Asset      Size  Chunks             Chunk Names
fonts/Material-Design-Iconic-Font.ttf  96.9 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff2  37.5 KiB          [emitted]  
fonts/Material-Design-Iconic-Font.woff  49.1 …

我计划在一个项目中使用 Webpack，并使用 Html-loader + file-loader 设置工作流程，以获取带有图像动态 src 的生产 html 文件，正如 Colt Steele 在本视频中所教授的那样。这是我的 src/ 文件：

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Popular on Letterboxd</title>
</head>
<body>
  <img src="./assets/chira.jpg" />
</body>
</html>

索引.js：

import img from './assets/chira.jpg';
import "./main.css";

和main.css

body {
  background-color: darkblue;
}

这些是我的配置文件（我有一个用于开发和生产的个人文件，以及两个共同的配置文件）：

webpack.common.js：

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

module.exports = {
  entry: './src/index.js',

  devtool: "none",
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/, …