スタイラス バンドルを 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 ファイルに追加することでしたが、これは必要なものではありません。
HtmlWebpackPluginConfigForJS
index_bundle.js
正常に動作し、 my にファイルを正常に挿入しますindex.html
。しかし、それはスタイルでは機能しません。
スタイラス バンドルが正しく挿入されるように、webpack の設定を改善する方法を教えてください。