I've been attempting to utilize the Google Closure Compiler with my webpack assets, but I'm encountering warnings regarding problems in the webpack styles loaders. However, I was under the impression that the style loaders wouldn't be included in any of the js assets since I'm using MiniCssExtractPlugin to generate a separate css file.
Here are my two questions:
- How can I access the output of my webpack.config.js in production mode? (Is there a command line option to view the merge result?)
- How can I make sure the merge functions as expected, i.e., not utilizing style-loader for production?
Code:
const merge = require("webpack-merge");
var common = {
....
module: {
rules: [
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
// see https://github.com/webpack-contrib/css-loader#url
loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
},
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: ["style-loader", "css-loader?url=false"]
},
...
if (MODE === "production") {
module.exports = merge(common, {
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {})
]
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false"
]
},
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
"sass-loader"
]
}
]
}