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/文件夹中。但是，尽管正在应用来自scss的样式，但是似乎无法找到存储在dist/site中的html文件。

那是为什么？我该如何解决？

Answer 1

我自己弄清楚了。该publicPath: '/assets/'实际上应该是publicPath: '../assets/'，然后资产路径才正确。

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

1 个答案: