为没有 HTML 的 webpack mini-css-extract-plugin 提取文件创建链接标签

Question

我想用 webpack 4 打包一个 javascript 项目，但我正在努力处理 CSS 文件。我捆绑的 JS 文件将被其他网站使用带有绝对 URI 的脚本标签。所以我希望我的包为样式表注入链接标签，以便管理文件名中的哈希。

我的样式源是一个scss文件。当我使用它时效果很好，style-loader但我想在其他文件中提取 CSS。

我尝试了以下方法webpack.config.js：

const miniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader']
            }
        ]
    },
    plugins: [
        new miniCssExtractPlugin({
            filename: '[name].[hash].css',
        }),
    ]
};

它在输出目录中创建我的 CSS 文件，但加载程序不会像那样将它注入到 DOMstyle-loader中。而且我不能style-loader在mini-css-extract-plugin.

我无法使用，html-webpack-plugin因为没有 HTML 输出文件。有没有办法用现有的装载机做我想做的事？有没有办法在JS中获取提取的文件url来自己创建链接标签？

我的 devDependencies ：

{
  // ...
  "devDependencies": {
    "css-loader": "^3.3.2",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "webpack": "^4.41.3",
    "webpack-cli": "^3.3.10"
  }
}

谢谢你。

Answer 1

事实上，我在尝试使用mini-css-extract-plugin. 可以通过以下规则简单地实现：

{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                injectType: 'linkTag'
            }
        },
        {
            loader: 'file-loader',
            options: {
                name: "css/[name].[hash].css",
                publicPath: "dist/" // depends on your project architecture
            }
        },
        'sass-loader'
    ]
}

我将不得不添加另一个加载程序以缩小我的想法。