0

大家好,我正在使用webpack-cdn-plugin从 CDN 加载资产,但我在加载 CSS 资产时遇到了问题。这就是我的代码的样子:

{
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            favicon: './src/assets/images/favicon.ico',
            filename: 'index.html',
        }),
        new HtmlWebpackPlugin({
            template: './src/services.html',
            favicon: './src/assets/images/favicon.ico',
            filename: 'services.html',
        }),
        new HtmlWebpackPlugin({
            template: './src/blocks.html',
            favicon: './src/assets/images/favicon.ico',
            filename: 'blocks.html',
        }),
        new WebpackCdnPlugin({
            modules: [{
                name: 'masonry-layout',
                var: 'Masonry',
                path: mode === 'production' ? 'dist/masonry.pkgd.min.js' : 'dist/masonry.pkgd.js',
            },
            {
                name: 'imagesloaded',
                var: 'imagesLoaded',
                path: mode === 'production' ? 'imagesloaded.pkgd.min.js' : 'imagesLoaded.pkgd.js',
            },
            {
                name: 'flickity',
                var: 'Flickity',
                path: mode === 'production' ? 'dist/flickity.pkgd.min.js' : 'dist/flickity.pkgd.js',
            }],
            prod: true,
            publicPath: '/node_modules',
        }),
    ],
}

阅读应该在头脑中生成的文档<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">,但事实并非如此。Flickity 包在 dist 文件夹中有 CSS 和 JS 文件。我也尝试过添加

{
    name: 'flickity',
    var: 'flickity',
    path: isProd ? 'dist/flickity.min.css' : 'dist/flickity.css',
}

但这只会生成另一个script链接。有谁知道如何使它工作?

4

0 回答 0