为不带HTML的webpack mini-css-extract-plugin解压缩文件创建链接标签

Question

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

我的样式源是一个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文件，但是加载程序不会像style-loader那样将它注入到DOM中。在mini-css-extract-plugin之后我就不能使用style-loader了。

我不能使用html-webpack-plugin，因为没有HTML输出文件。有没有办法用现有的加载器做我想要做的事情？有没有办法让解压出来的文件url在JS中自己创建link标签？

我的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'
    ]
}

我将不得不添加另一个加载器，以缩小我认为。