I have a scenario where I am importing several .css files from npm modules in my main.js file, which serves as the entry point for my webpack configuration. Here is an example of how it's set up:
"use strict";
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
module.exports = {
entry: {
dashboard: './js/main.js',
vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"],
},
output: { path: "../resources/public", filename: 'bundle.js' },
plugins: [
new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}),
new ExtractTextPlugin("[name].css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
],
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'stage-0']
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader',
],
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}
]
},
};
To avoid errors during the build process due to missing images and fonts needed by certain modules like bootstrap.css, I included loaders for testing images and fonts, which has resolved the issue. Everything now builds successfully!
However, the solution also results in unwanted .png, .woff2, .eot, .ttf files being output to the same folder.
An alternative approach would be to create a script that removes these specific files after running webpack in the terminal. But ideally, I'd prefer not to take that route.
Is there a way to adjust my webpack configuration to test for images and fonts without processing and outputting them to the output folder?