使用 webpack 的文件加载器时，捆绑资产的路径似乎有误

Question

我是 Webpack 的新手，很难将它与 metalsmith 融合在一起。目前我有以下文件夹结构：

├───content         // markdown files
├───dist
│   ├───assets      // contains bundle.js
│   │   ├───fonts   // contains ttf's with hashed names 
│   │   └───img     // contains img's with hashed names
│   └───site        // contains html files with <script src="../assets/bundle.js"></script>
└───src
    ├───assets
    │   ├───fonts   // contains real-name-fonts.ttf
    │   ├───img     // contains real-name-images.jpg
    │   ├───js      // contains my entry point site.js
    │   └───scss
    ├───config
    ├───layouts
    ├───partials
    └───scripts

这就是我的 webpack.config.js 的样子

module.exports = {
    mode: 'development', 
    entry: join(paths.webpackSrc, 'js', 'site.js'), // points to 'src/assets/js/site.js'
    plugins: [
        new CleanWebpackPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: paths.webpackDst, // points to 'dist/assets'
        publicPath: paths.webpackPublicPath, // points to '/assets/'
    },
    devServer: {
        contentBase: './dist',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'postcss-loader', options: { plugins: function () { return [require('autoprefixer')]; } } },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'
                }
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'img'
                }
            },        
        ]
    }
}

这是我切入点的一部分site.js

import 'bootstrap';
import 'popper.js'; 
import '../scss/_stylesheet.scss';

import Avatar from '../img/avatar.jpg';

var avatarImgNavbar = document.getElementById('avatar');
avatarImgNavbar.src = Avatar;

我可以看到 webpack 正在拾取资产，它们确实显示在正确对应的 dist/assets/ 文件夹中。然而，存储在 dist/site 中的 html 文件似乎找不到资产，尽管正在应用来自 scss 的样式。

这是为什么？我该如何解决这个问题？

Answer 1

自己想出来的。这个 publicPath: '/assets/' 实际上应该是 publicPath: '../assets/' 然后资产路径是正确的。

使用 webpack 的文件加载器时，捆绑资产的路径似乎有误

Bundled assets seem to have a wrong path when using webpack's file-loader

webpack

metalsmith