一言で言えば、extract-text-webpack-plugin
を使用してCSS資産を出力しようとしています。私はブートストラップローダーがbootstrap.css
を吐き出すと予想しますが、そうではありません。私はapp.js
にinclude 'webpack-loader/path/to/css'
を追加しなければならないかもしれないと思っていますが、それについては何か気が散っていて、webpackの目的に反しています。webpack bootstrap-loaderはbootstrap.jsを発行しますが、bootstrap.cssファイルは発行しませんか?
以下は、問題を表す最小限のwebpack.config.js
です。構成はwebpack.bootstrap.config.js
と.bootstraprc
ファイルがwebpack.config.js
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bootstrapEntryPoints = require('./webpack.bootstrap.config');
const extractCssPlugin = new ExtractTextPlugin({
filename : '[name].css'
});
module.exports = {
entry : {
app : "./src/js/app.js",
bootstrap : bootstrapEntryPoints.dev
},
output : {
path : path.resolve(__dirname, 'dist'),
filename : "[name].bundle.js"
},
module : {
rules : [
{ test: /\.css$/, use : extractCssPlugin.extract({use : [{loader: "css-loader"}]})},
{ test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },
{ test: /\.(ttf|eot)$/, loader: 'file-loader' },
]
},
devServer : {
contentBase : path.join(__dirname, "dist"),
hot : true,
},
plugins : [
extractCssPlugin,
],
};
NOTESと同じディレクトリに配置されていることを前提としています
bootstrapEntryPoints.dev
が'bootstrap-loader'
に解決されます。私のブートストラップエントリポイントがentry : {..., bootstrap : 'bootstrap-loader'}