1

我用谷歌搜索了很多，但我没有找到一个明确的解决方案来解决我的问题。

我的 xxx.sass 和 index.html 都会从 images 文件夹中引用相同的 xxx.png。但是 webpack 解析到了错误的相对路径。我用

  • webpack ^4.41.2,
  • 用于 xxx.png 的文件加载器 ^4.2.0
  • mini-css-extract-plugin ^0.8.0 for xxx.css
  • html-loader ^0.5.5 用于 index.html

源代码：

xxx.sass

.banner
    background-image: url(../images/xxx.png)

索引.html

<body>
    <h1>Hello World</h1>
    <img src="./images/xxx.png" />
</body>

我的文件夹结构是这样的：

/dist
  /images
     xxx.png
  /css
     xxx.css
  index.js
  index.html

/src
   /css
      xxx.sass
   /images
      xxx.png
   index.js
   index.html

如您所见，index.html 和 xxx.sass 中 xxx.png 的相对路径应该不同。但是在我运行 webpack 之后，index.html 和 xxx.css 与 xxx.png 的相对路径相同，例如：

索引.html

<body>
   <h1>Hello World</h1>
   <img src="images/google_0877987d.png" />
   <script type="text/javascript" src="index_b88aa84a.js"></script>
</body>

xxx.css

.banner
{
    width:184px;
    height:60px;
    background-image:url(images/google_0877987d.png)
}

我的 webpack.config.js：

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

module.exports = {
    mode: 'production',
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js',
    },
    module: {
        rules: [
            {
                test: /\.sass$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name]_[contenthash:8].[ext]',
                        context: path.resolve(__dirname, 'src/'),
                        useRelativePaths: true,
                    },
                }],
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: {
                        root: path.resolve(__dirname, 'src/'),
                        attrs: ['img:src', 'link:href'],
                    },
                }],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]_[contenthash:8].css',
        }),
    ],
}
4

1 回答 1

3

最后，我找到了解决方案。为 MiniCssExtractPlugin.loader 添加publicPath选项解决问题。

{
    test: /\.sass$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../',
            },
        },
        'css-loader',
        'sass-loader',
    ],
}

虽然问题解决了，但我对这个解决方案并不是 100% 满意，因为如果更改了文件夹结构，则需要相应地更新 publicPath。

如果有一些很好的解决方案可以根据文件夹结构自动解析相对路径会更好。

于 2019-10-31T01:27:32.017 回答