标签: webpack-file-loader

我想弄清楚url-loader和file-loader之间的区别.什么DataURl意思？

url-loader的工作方式与文件加载器类似,但如果文件小于字节限制,则可以返回DataURL.

当尝试在 Vue CLI 3 中加载自定义本地字体时，字体仍然不会出现。我没有收到任何错误消息。检查器显示正在加载的正确规则，但字体回落到serif#app。字体没有出现在我的 dist 文件夹中的任何地方。

我尝试在 vue.config.js 中添加加载器，更改 url 路径，并将 @font-face 规则移动到不同的位置，将公共路径更改为 ' ' 和 '/'，将 scss 导入 main.js。

字体加载：

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot');
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

并在 App.vue 中使用：

<style lang="scss">
#app {
  font-family: 'OpenSans-Regular', serif;
}
</style>

该样式放置在我的main.scss文件中。文件结构如下：

src
  assets
    fonts
      OpenSans-Regular.eot
      OpenSans-Regular.woff
      etc
  styles
    main.scss
  App.vue
vue.config.js

vue.config.js 文件如下：

module.exports = {
  publicPath: '/',
  css: { …

我有一个问题,使用webpack文件加载器让我的mp3文件工作.

这是问题所在:

我的硬盘上有一个mp3文件,如果我使用chrome打开例如"c:\ somefolder\somemp3file.mp3"在浏览器的选项卡中打开并播放就好了.

但是,当我使用webpack提供完全相同的文件时,它不起作用.我在webpack中配置了这样的加载器:

{
    test: /\.(gif|jpg|png|mp3|aac|ogg)$/,
    loader: 'file'
}

然后,当我尝试链接到文件时,我需要在我的javascript中,如下所示:

require('file!./../content/somemp3file.mp3');

这正确地返回了我的mp3文件的URL.

如果我尝试手动转到localhost:8080后面的require返回的url,Chrome中的mp3播放器就像我预期的那样弹出,但文件无法播放,并且无法点击播放按钮,就像文件已损坏一样或者其他的东西.

谁知道我在这里做错了什么？

我正在从头开始使用 webpack4 做一个项目。但是当我尝试在 HTML 文件中显示图像时，我遇到了一个奇怪的问题：在 之后npm run build，图像标签的 src 被构建为<image src="[object Module]". HTML 部分是：

<img src="images/main_background.jpg">

这webpack.config.js是：

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

以及这两个加载器的版本：

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

我无法弄清楚是什么问题...

我正在使用webpack为npm包生成适当的文件,这将包含一些反应组件.他们附加了一些CSS,引用了一些字体和图标.

使用file加载程序时,这些资产会使用fonts/my-font.woff主应用程序中缺少的绝对路径(即)进行错误引用.

有没有办法解决这个问题,让我的主应用程序寻找合适的文件？我宁愿修复软件包本身而不是像有人提到的那样复制资产,因为我可能无法完全控制主应用程序.

我第一次使用Webpack.目前一切都很顺利.我的问题是我正在尝试构建一个dist文件夹.目前我得到了我的index.html和bundle.js文件,但我无法弄清楚如何将我的资产推送到该dist文件夹.

我有文件加载器加载,但它实际上似乎没有做我想要的,没有我运行的谷歌搜索告诉我我需要知道什么.下面是我的配置文件.有人可以带马去水吗？一旦我运行它,我需要将所有图像导入我的React组件吗？

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

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
      { test: /\.(png|jpe?g|svg|)$/, use: { loader: 'file-loader', options: }}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

我试图将一些字体包含在一个组件库中,我将它作为使用Webpack生成的UMD软件包分发并安装为NPM模块; 组件使用这些字体.问题是指向生成的包中的字体的URL不正确,并且在运行使用该库的应用程序时导致404s.

例如,resolve-url-loader将输出一个URL "/myfont.woff".但是,当然,该文件实际上并不在应用程序中的该URL处可用,除非使用它的应用程序执行某些配置来复制该文件并在预期路径上提供该文件.

font-face: 'My Font'当应用程序从我的库中导入组件时,有没有办法自动使这些字体可用(即可以工作),从而最大限度地减少使用它的应用程序所需的配置量？

对于大文件,我不想使用url-loader和Base 64编码它们,我不能使用CDN.

鉴于此设置:

字体/ Styles.css中

@font-face {
  family: 'MyFont';
  src: url('fonts/myfont.otf');
}

我怎么能够:

1. 在我的JS包中,获取对CSS文件的URL的引用,例如字符串 [name].[hash].css
2. 生成的CSS文件应该是一个普通的CSS文件,但url()s指向生成的webfont文件？

就像是:

@font-face {
  family: 'MyFont';
  src: url('myfont.dds9394u329d9sa9r8439.otf');
}

我正在尝试:

webpack.config.js

{
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  loader: 'file-loader',
  include: [/fonts/]
},

{
  test: /\.css$/,
  use: ['file-loader', 'css-loader'],
  include: [/fonts/]
}

JS文件

const myfont = {
  family: 'MyFont',
  stylesheet: require('fonts/styles.css')
}

根据上一个问题,使用file-loader并require()很好地获取CSS的URL,但生成的文件不是纯CSS.

如何组合file-loader和css-loader(+可能是其他加载器)来获取此CSS文件？

谢谢!

PS我想避免copy-webpack-plugin这个,因为我希望CSS /字体文件在代码中进行哈希处理和寻址.

我在理解 URL/路径的性质以及使用 和配置其选项（例如 和 属性）时如何解析它们mini-css-extract-plugin时file-loader遇到context困难filename。

我正在为 WordPress 开发一个自定义主题，自定义主题的文件夹是我初始化 npm project/package.json 文件和 webpack.config.js 文件的位置。我正在使用浏览器同步插件将本地 WordPress 服务器代理到浏览器同步服务器。

文件加载器将文件发送到 dist>assets>fonts 文件夹中。但编译后的 CSS 文件中生成的 URL 未正确解析。

输出CSS，浏览器控制台错误

GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.ttf net::ERR_ABORTED 404 (Not Found)

GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.woff 404 (Not Found)

在上面的错误中，网址显示dist/css/assets/fonts/my-font.woff，这不是我所期望的。这是预期的，dist/assets/fonts/my-font.woff因为这是文件加载器在 dist 文件夹中发出文件的地方。（如文件加载器上下文选项中定义）

我不明白为什么它将css目录添加到字体 url 中。唯一提及的dist/css路径是在 MiniCSSExtractPlugin 选项的 filename 属性中。因为那是我想要输出 css 文件的地方。

css这可以通过删除文件名属性上的路径前缀来确认。然后，该 url 会相对于 dist 路径正确解析，但编译后的 css 文件会放置在 dist 文件夹的根目录中，而不是其自己的dist/css子目录中。

mini css 提取插件选项

new MiniCSSExtractPlugin({
            filename: …

我正在使用 webpack，它是file-loader + html-loader将文件发送到我的输出目录中。它几乎按预期工作，因为它还复制了这些文件。

这是我的webpack.config.js文件的一部分：

module.exports = {
   module: {
      rules: [
         { test: /\.html$/, use: ["html-loader"] },
         {
            test: /\.(jpg|png)$/,
            use: {
               loader: "file-loader",
               options: {
                  name: "[name].[ext]",
                  outputPath: "img",
               },
            },
         },
      ],
   },
};

有一个小例子说明我的输出目录的样子：

dist/
- img/
   - img1.png
   - img2.png
- ab0d12.png
- c3d612.png
- index.html
- bundle.js

带有散列名称的两个图像是img/目录中不需要的重复项。正如您在上面的示例中看到的，我什至没有将名称设置为散列，而且我也无法以任何方式打开重复文件。

我正在使用一些插件，例如HtmlWebpackPlugin或CleanWebpackPlugin，但我相信它们不会导致问题。

版本：

• 网络包 5.28.0
• 文件加载器 6.2.0
• html加载器 2.1.2