标签: webpack-file-loader

我正在使用Webpack作为我的React应用程序.

我在我的webpack配置中安装了"File-loader"和"Url-loader".

但是,我不知道如何将图像链接到我的组件.我在'Data.js'文件中保存图像的'src',从那里我将图像的数据传递给react组件.

我的webpack.config.js:

...
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
...
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : "babel",
                query : {
                    cacheDirectory : true, …

对于我的图片位置： /src/assets/bitmap/sample.jpg

给出的是关键配置：

context: resolve('src')

output: {
  path: resolve('builds/web'),
  publicPath: '',
  filename: ifProd('[name].[chunkHash].js', '[name].js')
},

...

loaders: [
  {
    test: /\.(png|jpg|jpeg)/,
    loader: 'file-loader?name=[path][name].[ext]?[hash]'
  }
]

我期望图像的输出结构如下所示：

/builds/web/assets/bitmap/sample.jpg

相反，我得到这个：

/builds/web/src/assets/bitmap/sample.jpg

我如何告诉文件加载器输出路径必须相对/src而不是相对/？

我是从webpack开始的,但我现在真的很新,而且我现在卡住了.我的项目正确复制了我的字体而不是图像.现在,我能够使其工作的唯一方法是手动将图像复制到dist/img文件夹.

这是我的配置:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require('webpack');
var path = require("path");



module.exports = {
entry: './src/app.js',
output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'app.bundle.js'
    // publicPath:  '/dist',
},
module: {
    rules:[
        {
        test:/\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader?sourceMap","resolve-url-loader","sass-loader?sourceMap"],
            // publicPath: '/dist'
            })
        },
        {
            test: /\.(woff2?|ttf|otf|eot|svg)$/,
            use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }  
                  }]
            // loader: 'file-loader?name=/fonts/[name].[ext]'
        },
        {
            test: /\.(jpg|png|gif)$/,
            use: [{
                    loader: 'file-loader',
                    options: …

嗨，我在我的应用程序中使用套接字io。这需要fs。当我尝试使用下面的webpack配置捆绑我的JavaScript时。即时通讯收到错误无法解决“ FS”。

Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'

我通过添加target:'node'和找到了node:{fs:'empty'}。这个问题解决了。

但是sass-loader中存在一个问题。低于错误。

ERROR in javascript/bundle.js from UglifyJs
Unexpected token: name (zlibLimiter) [javascript/bundle.js:60019,4]
Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js??ref--2-2!../../../node_modules/sass-loader/lib/loader.js!s

运行应用程序而忽略上述错误。低于错误。

external "crypto":1 Uncaught ReferenceError: require is not defined
    at Object.__decorate (external "crypto":1)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
    at Object.byteToHex (rng.js:4)
    at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)

以下是我的webpack配置和版本。有人可以帮我解决这个问题吗？

“ webpack”：“〜3.6.0”，npm -v 5.8.0节点-v v8.4.0

const webpack = require('webpack');
const env = process.env.NODE_ENV;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const …

我正在尝试将json文件（2个文件）拆分为多个单独的块。我能够做到，但是有一个“骗局”。

这些json .js通过webpack 转换为，这就是为什么我file-loader在.json文件中添加了，但await import现在返回的是字符串而不是json。

Webpack规则

module: {
    rules: [
        { test: /\.scss$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader",] },
        { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
        { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=fonts/[name].[ext]" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" },
        {
            test: /\.(js|jsx)$/,
            // Skip any files outside of project's `src` directory
            include: [
                path.resolve(__dirname, "../src"),
            ],
            loaders: ["babel-loader"],
        },
        {
            test: /\.json$/,
            type: …

文件加载器对我来说无法正常工作，图像没有显示。我的图像正确放置在 dist/static/assets 文件夹中。所以没有问题。

这是我的配置：

test: /\.(png|jpg|gif|svg)$/,
    use: [
      {
        loader: 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        options: {
          context: 'src',
          name: '[name].[ext]',
          publicPath : 'static/assets',
          outputPath : 'static/assets'

        }
      }
    ]

但是我源中的图像被转换为​​base64？但它们不起作用。

<img role="presentation" src="data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSAic3RhdGljL2Fzc2V0cy90d2l0dGVyLWljb24uc3ZnIjs=">

而图像在 /dist/static/assets 文件夹中保留其原始名称。如何让图像与文件加载器一起使用？

我正在使用简单的 jQuery、sass 和 html 进行编码。我正在尝试创建一个简单的 PDF html 下载链接，但我不知道如何在 webpack 配置中使用 file-loader 编译 pdf 文件...而且我想知道 file-loader 是否是正确的依赖项为此（我使用的是版本 1.1.6）。

我尝试将“pdf”添加到 webpack.config.js 文件中的“test: /.(gif|png|jpe?g)$/”，以便它读取“test: /.(gif|png|jpe? g|pdf)$/' - 它不起作用。这是在删除并重新安装 node_modules 和 dist 之后。我还手动将 pdf 文件添加到我的 dist 文件中，以确保它不是 HTML 或其他问题。事实上，在那之后它确实起作用了，但我想让这个东西在我的 webpack 环境中单独构建。

//webpack.config.js file, using file-loader 1.1.6

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },

  devtool: 'eval-source-map',
  devServer: {
    contentBase: './dist'
  },

  module: {
   rules: [
     {
       test: /\.(gif|png|jpe?g|pdf)$/,
       use: [
         { …

我想创建一个使用/导入静态图像的 svelte 组件（基于 webpack）。我如何确保图像被正确导出，即使用我的组件的苗条应用程序也能看到图像？

在我的组件中，我尝试导入图像并使用 webpack 的文件加载器：

import image from "./image.jpg";

和

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

这有效，图像包含在 dist 文件夹中，但在这种情况下，我还需要向主 svelte 应用程序添加一个文件加载器，这是我想避免的额外要求。主应用程序应该只需要导入我的组件。

这是可能的还是以上已经是推荐的方法？

我对webpack / npm还是很陌生，我正设法让我了解如何在其他项目相关性中使用CSS url。

资料夹结构

src
  fonts/
  scss/
    app.scss
  js/
    app.js
  img/
  index.html

webpack.config.js

var path = require('path');
var extractPlugin = require('extract-text-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");

module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/app.js'
    },
    devServer: {
        stats: 'errors-only',
        compress: true,
        open: true,
        port: 9000
    },
    module: {

        rules: [

            // ES6 -> ES5 transpiler

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015'] …

我遇到一个问题，文件加载器没有复制在图像 src 中使用resolve.alias 的图像。

一个例子：

<img src="assets/images/image.jpg"/>

解析别名是：

alias: {
  'assets': path.resolve(__dirname, 'client/assets'),
}

文件加载器是：

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

这是在 React/Redux 应用程序中。我知道我可以使用 require，但有些图像使用变量，如果该变量等于没有图像的值，则整个应用程序将因无法加载模块而崩溃。

有人有什么想法吗？

谢谢。