Webpack 4，寻找 /img 和 /fonts 目录的 Slick carousel

Question

Slick 库正在错误的目录中查找其字体和图像。它似乎希望 /img 和 /fonts 目录位于 /css 目录中，slick 和 slick-theme 本身位于该目录中。

我在 Webpack 生产构建期间没有遇到任何错误。

如何配置 Webpack 让库在 ../img 和 ../fonts（相对于 CSS 文件夹）中搜索其文件？

文件树：

carousel-slick/
┣ dist/
┃ ┣ css/
┃ ┃ ┗ main.dafdd254822767b6f73f.css
┃ ┣ fonts/
┃ ┃ ┣ slick.295183786cd8a138986521d9f388a286.woff
┃ ┃ ┣ slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot
┃ ┃ ┗ slick.c94f7671dcc99dce43e22a89f486f7c2.ttf
┃ ┣ img/
┃ ┃ ┣ ajax-loader.fb6f3c230cb846e25247dfaa1da94d8f.gif
┃ ┃ ┣ logo_composite.53841c53b1d9c49a79209262895dcfd1.svg
┃ ┃ ┗ slick.2630a3e3eab21c607e21576571b95b9d.svg
┃ ┣ js/
┃ ┃ ┣ main.31b848d3343e3e1aa5e3.bundle.js
┃ ┃ ┣ runtime.f9925e05396ccd248c3a.bundle.js
┃ ┃ ┣ vendor.411d877b7978c7ec77b5.bundle.js
┃ ┃ ┣ vendors.8468049c53ca650ab21f.bundle.js
┃ ┃ ┗ vendors.8468049c53ca650ab21f.bundle.js.LICENSE.txt
┃ ┗ index.html
┣ src/
┃ ┣ assets/
┃ ┃ ┣ fonts/
┃ ┃ ┣ ico/
┃ ┃ ┗ img/
┃ ┣ js/
┃ ┃ ┗ app.js
┃ ┣ scss/
┃ ┃ ┣ app.scss
┃ ┃ ┣ base.scss
┃ ┃ ┗ main.scss
┃ ┣ index.css
┃ ┣ index.js
┃ ┣ template.html
┃ ┗ vendor.js
┣ .eslintrc.json
┣ .gitignore
┣ .prettierrc
┣ package-lock.json
┣ package.json
┣ webpack.common.js
┣ webpack.dev.js
┗ webpack.prod.js

文件树（Slick 轮播以这种方式工作）

carousel-slick/
┣ dist/
┃ ┣ css/
┃ ┃ ┣ fonts/
┃ ┃ ┣ img/
┃ ┃ ┗ main.dafdd254822767b6f73f.css
┃ ┣ fonts/
┃ ┃ ┣ slick.295183786cd8a138986521d9f388a286.woff
┃ ┃ ┣ slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot
┃ ┃ ┗ slick.c94f7671dcc99dce43e22a89f486f7c2.ttf
┃ ┣ img/
┃ ┃ ┣ ajax-loader.fb6f3c230cb846e25247dfaa1da94d8f.gif
┃ ┃ ┣ logo_composite.53841c53b1d9c49a79209262895dcfd1.svg
┃ ┃ ┗ slick.2630a3e3eab21c607e21576571b95b9d.svg
┃ ┣ js/
┃ ┃ ┣ main.31b848d3343e3e1aa5e3.bundle.js
┃ ┃ ┣ runtime.f9925e05396ccd248c3a.bundle.js
┃ ┃ ┣ vendor.411d877b7978c7ec77b5.bundle.js
┃ ┃ ┣ vendors.8468049c53ca650ab21f.bundle.js
┃ ┃ ┗ vendors.8468049c53ca650ab21f.bundle.js.LICENSE.txt
┃ ┗ index.html
┣ src/
┃ ┣ assets/
┃ ┃ ┣ fonts/
┃ ┃ ┣ ico/
┃ ┃ ┗ img/
┃ ┣ js/
┃ ┃ ┗ app.js
┃ ┣ scss/
┃ ┃ ┣ app.scss
┃ ┃ ┣ base.scss
┃ ┃ ┗ main.scss
┃ ┣ index.css
┃ ┣ index.js
┃ ┣ template.html
┃ ┗ vendor.js
┣ .eslintrc.json
┣ .gitignore
┣ .prettierrc
┣ package-lock.json
┣ package.json
┣ webpack.common.js
┣ webpack.dev.js
┗ webpack.prod.js

webpack.prod.js

const path = require('path');
const common = require('./webpack.common');
const merge = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: 'js/[name].[contentHash].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(),
            new TerserPlugin(),
            new HtmlWebpackPlugin({
                template: "./src/template.html",
                minify: {
                    removeAttributeQuotes: true,
                    collapseWhitespace: true,
                    removeComments: true,
                    removeRedundantAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    useShortDoctype: true
                }
            })
        ],
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\/]node_modules[\/]/,
                    name: 'vendors',
                    enforce: true,
                    chunks: 'all'
                }
            }
        }
    },
    plugins: [new MiniCssExtractPlugin({ filename: "css/[name].[contentHash].css" }),
    new CleanWebpackPlugin()],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }],
                include: [/fonts/, path.resolve(__dirname, 'src', 'scss')],
            }, {
                test: /\.(woff|woff2|ttf|otf|eot)$/,
                loader: 'file-loader',
                include: [
                    /fonts/
                ],
                options: {
                    name: '[name].[hash].[ext]',
                    outputPath: 'fonts/',
                }
            }
        ]
    }
});

webpack.common.js

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

module.exports = {
    entry: {
        main: './src/index.js',
        vendor: './src/vendor.js'
    },
    resolve: {
        alias: { 
            jquery: "jquery/src/jquery"
        }
    },
    plugins:[
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery'
        })
    ],
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            }, {
                test: /\.(svg|png|jpe?g|gif)$/i,
                use:
                {
                    loader: 'file-loader',
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "img",
                        esModule: false
                    }
                }
            }
        ]

    }
};

src\scss\main.scss

@import "~bootstrap/scss/bootstrap";
$slick-font-path: "~slick-carousel/slick/fonts/";
$slick-loader-path: "~slick-carousel/slick/";
@import '~slick-carousel/slick/slick', '~slick-carousel/slick/slick-theme';
@import "./app";
@import "./base";

Chrome抱怨文件丢失

Answer 1

已解决！ 我能够通过在 MiniCssExtractPlugin 加载程序中包含一个额外的选项来使其工作。 Documentation.

{
    test: /\.(sa|sc|c)ss$/,
    use: [{
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: (resourcePath, context) => {
                return path.relative(path.dirname(resourcePath), context) + '/dist/';
            }
        }
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }],
    include: [/fonts/, path.resolve(__dirname, 'src', 'scss')],
}

Webpack 4，寻找 /img 和 /fonts 目录的 Slick carousel

Webpack 4, Slick carousel looking for the /img and /fonts directories

webpack

sass

slick.js