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

Question

我想用 webpack 4 打包一个 javascript 项目，但我正在努力处理 CSS 文件。我捆绑的 JS 文件将被其他使用带有绝对 URI 的脚本标签的网站使用。所以我希望我的包为样式表注入 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 输出文件。有没有办法用现有的装载机做我想做的事？有没有办法在JS中获取提取的文件url来自己创建link标签？

我的开发依赖：

{
  // ...
  "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'
    ]
}

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

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

Create link tag for webpack mini-css-extract-plugin extracted file without HTML

javascript

webpack

css-loader

mini-css-extract-plugin