1

スタイラス バンドルを 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']
    }
}

スタイルを機能させる唯一の方法はrequire('./index.styl);、JavaScript ファイルに追加することでしたが、これは必要なものではありません。

HtmlWebpackPluginConfigForJSindex_bundle.js正常に動作し、 my にファイルを正常に挿入しますindex.html。しかし、それはスタイルでは機能しません。


スタイラス バンドルが正しく挿入されるように、webpack の設定を改善する方法を教えてください。

4

1 に答える 1