Here's a public Gist of my Webpack configuration, which is essentially a slightly modified Webpack config ejected from Angular CLI:
https://gist.github.com/sparkbuzz/3cd017671751083e2af8c10a1ad37747
This Webpack build is generating styles.bundle.css AND styles.bundle.js, but styles.bundle.js contain commented lines that read:
// removed by extract-text-webpack-plugin
The styles.bundle.js file is completely redundant as the extract plugin removed all it's contents and dumped it in styles.bundle.css as expected.
How can I avoid loading styles.bundle.js, as the styles.bundle.css file is loaded from a link inside my resulting index.html.
In webpack.config.js there are two instances of the extract-text-webpack-plugin:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractMainCSS = new ExtractTextPlugin('[name].bundle.css');
const extractSplashCSS = new ExtractTextPlugin('splash.css');
There's an entry point for styles that is the reason for having styles.bundle.js:
styles: [
"./src/styles/styles.scss",
"./src/styles/vendor.scss"
],
Then some rules to generate splash.css and styles.bundle.css
{
include: [
path.join(process.cwd(), "src/styles/splash.scss")
],
exclude: [
path.join(process.cwd(), "src/styles/styles.scss"),
path.join(process.cwd(), "src/styles/vendor.scss")
],
test: /.scss$/,
loaders: extractSplashCSS.extract({
use: [
'css-loader',
'postcss-loader',
'sass-loader'
]
})
},
{
exclude: [
path.join(process.cwd(), "src/styles/styles.scss"),
path.join(process.cwd(), "src/styles/vendor.scss"),
path.join(process.cwd(), "src/styles/splash.scss")
],
test: /\.scss$/,
loaders: [
"exports-loader?module.exports.toString()",
"css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
"postcss-loader",
"sass-loader"
]
},
{
exclude: [
path.join(process.cwd(), "src/styles/splash.scss"),
],
include: [
path.join(process.cwd(), "src/styles/styles.scss"),
path.join(process.cwd(), "src/styles/vendor.scss")
],
test: /\.scss$/,
loaders: extractMainCSS.extract({
use: [
"css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
"postcss-loader",
"sass-loader"
]
})
},
and the two instances of the extract plugin has been added to the plugins object:
plugins: [
extractMainCSS,
extractSplashCSS,
What I ended up doing was to revert the styles bundle to serve as an ordinary Webpack bundle on it's own, meaning no .css file.
I changed the loaders portion for my rule:
loaders: ExtractTextPlugin.extract({
use: [
"css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
"postcss-loader",
"sass-loader"
],
/...
})
to the following:
loaders: [
"css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
"postcss-loader",
"sass-loader"
],
/...
})
There was no need for text extraction here. What was important to me was that I managed to get the extraction and eventually, inlining of splash.css working correctly
I still want to see what happens with multiple instances and the disabled property set to different values on each.