标签: webpack-file-loader

我有一个 webpack 项目，我需要在 css 中通过url(). 在其他地方，我想导入图像并在我的 JS 代码中使用它们，所以我使用file-loader. 我的webpack.config规则如下（请注意，我不使用 SASS）：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  module: {
    rules: [
      {
        test: /\.(m|c)?jsx?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
          },
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: {
          loader: 'file-loader',
          options: {
            esModule: false
          }
        }
      },
      {
        test: /\.svg$/i,
        use: {
          loader: 'file-loader', …

我是vuejs + webpack + electron的新手,我正在用这些工具开始一个新项目.

我很难在我的标签中检索资产的路径.

我的项目结构如下:

/my-project
  /app
    /components
      componentA.vue
      ...
    App.vue
    main.js
  /dist
  /assets
    logo.png
  package.json
  webpack.config.js
  ...

我的webpack.config.js看起来像:

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './app/main.js',
  // Where should the compiled file go?
  output: {
    // To the `dist` folder
    path: './dist',
    // With the filename `build.js` so it's dist/build.js
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader', …

我正在将Webpack与一些插件和加载程序结合使用，以获取src /文件夹并构建dist /文件夹。url-loader（当图像大于特定限制时回退到文件加载器）正在将它在我的html和scss文件中找到的图像输出到预期的正确目录。但是，它会更改那些文件中的相对路径，从而输出具有错误路径的css文件。

文件结构：

src/
    index.html
    assets/
        js/
            index.js
        scss/
            style.scss
        img/
            pic.jpg
            background.jpg

dist/
    index.html
    assets/
        js/
            index.js
        css/
            style.css
        img/
            pic.jpg
            background.jpg

如您所见，我的dist /文件夹镜像了我的src /文件夹，除了scss被编译为css。

src / index.js导入index.html和style.scss，以便那些文件可以由webpack解析，并且其中的任何图像都可以由url-loader处理：

index.js

import '../../index.html';
import '../scss/style.scss';

style.scss使用相对路径在主体上设置背景图像：

style.scss

body {
    background: url('../img/background.jpg');
}

index.html只是使用相对路径显示图像：

index.html

<img src="./assets/img/pic.jpg" alt="pic">

我使用HtmlWebpackPlugin在我的html文件中进行复制，因为它允许我指定要自动包含为脚本标记的块。对于CSS，我要么使用开发中的style-loader将其注入html文件，要么使用MiniCssExtractPlugin将其提取到生产环境中的自己的文件中。

但是，当webpack解析index.html和style.scss时，相对路径分别替换为'assets / img / pic.jpg'和'assets / img / backgorund.jpg'。这不会破坏index.html中的路径，因为它实际上是相同的相对路径，但这显然是style.css的问题。如何停止url-loader更改相对路径，或仅生成正确的路径？另请注意，在开发中使用样式加载器将css注入html时，该路径有效，因为该路径是相对于html文件的。理想情况下，webpack应该能够生成正确的相对路径，具体取决于我是在生产中提取css还是在开发中注入css。

我试过使用resolve-url-loader，指定publicPath和outputPath，当然也可以在线搜索答案，但是运气不佳。

webpack.config.js

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

const …

所以我在尝试编译时在我的 webpack 代码中收到此错误，当我以生产模式启动时会发生这种情况，当我删除 html-loader 时，错误消失了，我还包括要使用的 HtmlWebpackPlugin 和 file-loader ：

webpack.prod.js：

const path = require("path");
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
  mode: "production",
  output: {
    publicPath: '',
    filename: "js/[name].[contenthash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
});

webpack.common.js：

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

module.exports = {
  entry: {
    main: "./src/index.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/html/index.html'
    })
  ],
  module: {
    rules: …

{
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader?name=img/img-[hash:6].[ext]',
      },

我将此配置添加到中以通过将上述规则添加到中webpack.config.js来使用file-loader

module: {
    rules: [

部分，但没有任何图像文件移动到dist/文件夹，即使我将图像文件放入src/images/. 我是否遗漏了一些需要添加到 webpack 配置中的内容？

我正在遵循https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/中的示例

顺便说一句，我正在使用 webpack 2...现在有不同的方法来配置文件加载器吗？

这是整个 webpack 配置文件

const { resolve } = require('path');

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const config = {
  devtool: 'cheap-module-eval-source-map',

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './main.js',
    './assets/scss/main.scss',
  ],

  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  context: resolve(__dirname, 'app'),

  devServer: …

我有一个.scss文件，我在其中使用了背景图像 ( background-image: url('../../../image.png'))。该file-loader的WebPack插件监测的形象，并将其复制当我建立我的应用程序，这是伟大的。

问题是我有相当多的图像和相当多的.scss文件，而且我的代码中的所有相关导入都非常混乱。

有什么方法可以告诉我，file-loader或者sass-loader如果我这样做，background-image: url('@alias/image.png')我指的是文件夹在哪里image.png？