javascript - 如何使用 HtmlWebpackPlugin 将编译好的 Stylus 包注入(inject) html 文件？

Question

我需要将 Stylus 包注入(inject)到 webpack 配置文件中的 html 文件中。

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

下面是我当前的 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 文件注入(inject)我的 index.html 中。但它不适用于样式。

<小时/>

您能帮我改进我的 webpack 配置，使其正确注入(inject)我的 stylus 包吗？

Answer 1

默认情况下，HtmlWebpackPlugin 会从文档中注入(inject) css 文件:

If you have any css assets in webpack's output (for example, css extracted with the ExtractTextPlugin) then these will be included with tags in the HTML head.

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