Webpack图像文件夹

cvxl0en2 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(391)

我是相当新的webpack。
当我部署时，我基本上得到了一个JS文件和一堆图像，这些图像在同一个文件夹中被乱码成这样：

我不希望这一切发生。
我想让图像文件保持它们的名称，因为在我的javascript中，我想动态加载图像文件和我的资源文件中的任何其他文件。
我希望将它们放在自己的文件夹中，以便访问。
我的Webpack文件如下所示：

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,

  entry: "./js/client.js",

  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },

  module: {
    loaders: [
      { test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
      { test: /\.css|\.less$/, loaders: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.jpe?g$|\.gif$|\.png$|\.PNG$|\.svg$|\.woff(2)?$|\.ttf$|\.eot$/,
        loader: "file-loader" }
    ]
  },

  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

webpack

来源：https://stackoverflow.com/questions/48456598/webpack-images-folder

3条答案

按热度按时间

webghufk1#

文件加载器的默认行为是将每个文件命名为“[hash].[ext]”，如本文所述。如果您希望保持相同的文件名，则需要将name选项覆盖为“[name].[ext]"。如果您还希望保持原始路径结构，则也可以在表达式中使用“[path]”。
在这种情况下，您可以尝试：

{
  test: /\.jpe?g$|\.gif$|\.png$|\.PNG$|\.svg$|\.woff(2)?$|\.ttf$|\.eot$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]'
  }  
}

在上面引用的页面上还有其他记录的选项。

赞(0）回复(0）举报 2022-11-13

polkgigr2#

您可以忽略它们（使用IgnorePlugin），并使用CopyWebpackPlugin将文件复制到它们的目标目录中。

赞(0）回复(0）举报 2022-11-13

xpszyzbs3#

已接受的答案对Webpack 5无效。以下是创建自定义输出文件名的更新文档：
默认情况下，asset/resource modules将以[hash][ext][query]文件名发送到输出目录中。
您可以通过在Webpack配置中设置output.assetModuleFilename来修改此模板：

网页包.配置.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
+   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

定制输出文件名的另一种情况是将某种资源发出到指定目录：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
-     }
+     },
+     {
+       test: /\.html/,
+       type: 'asset/resource',
+       generator: {
+         filename: 'static/[hash][ext][query]'
+       }
     }
    ]
  },
};

使用此配置，所有html文件将被发送到输出目录中的static目录。
Rule.generator.filename与output.assetModuleFilename相同，仅适用于asset和asset/resource模块类型。

赞(0）回复(0）举报 2022-11-13

我来回答

Webpack图像文件夹

3条答案

相关问题

热门标签

最新问答