0

我是 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/文件夹中。然而，虽然来自 scss 的样式正在被应用，但存储在其中的 html 文件dist/site似乎找不到资产。

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

4

1 回答 1

0

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

于 2019-11-26T18:34:05.023 回答