Question

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

我已经使用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配置，让它正确地注入我的手写笔套装？

Answer 1

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

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

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

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

1 个答案: