如何使用 HtmlWebpackPlugin 将已编译的 Stylus 包注入 html 文件？答案

【问题标题】：How to inject a compiled Stylus bundle into html file using HtmlWebpackPlugin?如何使用 HtmlWebpackPlugin 将已编译的 Stylus 包注入 html 文件？
【发布时间】：2016-04-18 10:51:36
【问题描述】：

我需要在 webpack 配置文件的 html 文件中注入一个 Stylus 包。

我已经使用 HtmlWebpackPlugin 注入了 js 包，我认为也可以使用此插件注入已编译的手写笔包。

以下是我当前的webpack.config.js 文件：

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

var HtmlWebpackPluginConfigForJS = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});
var HtmlWebpackPluginConfigForStyles = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.styl',
    inject: 'head'
});

module.exports = {
    entry: [
        'babel-polyfill',
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    devtool: 'source-map',
    cache: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader'
            },
            {
                test: /\.styl$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'style-loader!css-loader!stylus-loader'
            }
        ]
    },
    plugins: [
        HtmlWebpackPluginConfigForJS,
        HtmlWebpackPluginConfigForStyles
    ],
    stylus: {
        use: [require('nib')(), require('rupture')()],
        import: ['~nib/lib/nib/index.styl', '~rupture/rupture/index.styl']
    }
}

我获得样式的唯一方法是在我的 javascript 文件中添加 require('./index.styl);，但这不是我需要的。

HtmlWebpackPluginConfigForJS 工作正常并且成功地将index_bundle.js 文件注入到我的index.html 中。但它不适用于样式。

能否请您帮助我改进我的 webpack 配置以使其正确注入我的手写笔包？

【问题讨论】：

标签： javascript dependency-injection webpack stylus html-webpack-plugin

【解决方案1】：

默认情况下，HtmlWebpackPlugin 从文档中注入 css 文件：

如果您在 webpack 的输出中有任何 css 资源（例如，使用 ExtractTextPlugin 提取的 css），那么这些资源将包含在 HTML 头部的标签中。

因此您可以使用ExtractTextPlugin 将您的所有样式提取到一个或多个文件中。但是要提取你应该在你的主要index.js 中需要你的index.styl，以便加载程序可以看到并进行提取。

【讨论】：