Bug report
Hi,
I am using sass-loader toghether with typings-for-css-modules-loader and MiniCssExtractPlugin, in order to get js-files together with corresponding css files for my multiple entries. However, in difference to webpack 3, now the styles.scss-files still appear in the js-bundles (as seen in report), which seems to be the reason why my bundles are now greater (in production-build) than using webpack 3.
my configuration is:
var path = require("path");
var webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
entry: {
startPage: ["./Entries/BodyStartSeite/BodyStartSeite"],
profilSeite: ["./Entries/BodyProfilSeite/BodyProfilSeite"],
meinBereichSeite: ["./Entries/BodyMeinBereichSeite/BodyMeinbereichSeite"],
orgInhalteSeite: ["./Entries/BodyOrgInhalteSeite/BodyOrgInhalteSeite"],
zusammenArbeitSeite: ["./Entries/BodyZusammenArbeitSeite/BodyZusammenArbeitSeite"],
wissenCommunitiesSeite: ["./Entries/BodyWissenCommunitiesSeite/BodyWissenCommunitiesSeite"],
appsDiensteSeite: ["./Entries/BodyAppsDiensteSeite/BodyAppsDiensteSeite"],
masterpage: ["babel-polyfill", "url-polyfill", "./Entries/MasterPage/MasterPage"],
aufgaben: ["./Entries/BodyAufgabenSeite/BodyAufgaben"],
ribbonFunctions: ["./Entries/RibbonFunctions/RibbonFunctions"],
searchResults: ["./Entries/SearchResults/SearchResults"],
newsPageLayoutSocial: ["./Entries/PageLayouts/NewsPageLayoutSocial"],
contentSeitePageLayout1: ["./Entries/PageLayouts/ContentSeitePageLayout1.global.scss"],
contentSeitePageLayout2: ["./Entries/PageLayouts/ContentSeitePageLayout2"],
contentSeitePageLayout3: ["./Entries/PageLayouts/ContentSeitePageLayout3"],
commentManagementList: ["./Entries/CommentManagementList/CommentManagementList"],
newsPageLayoutImageRight: ["./Entries/PageLayouts/newsPageLayoutImageRight"],
newsPageLayoutPictureHeader: ["./Entries/PageLayouts/newsPageLayoutPictureHeader"],
newsPageLayoutDisplayDialog: ["./Entries/PageLayouts/newsPageLayoutDisplayDialog.global.scss"],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist/"),
// sourceMapFilename: "maps/[file].map",
},
context: __dirname + "/src",
// Enable sourcemaps for debugging webpack's output.
// devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json", ".css", ".scss"],
plugins: [new TsconfigPathsPlugin()],
},
module: {
rules: [{
test: [/\.scss$/, /\.css$/],
include: [/node_modules/, /masterpage\.css/, /\.global\./i],
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
url: false,
},
}, {
loader: "sass-loader",
}],
}, {
test: [/\.scss$/, /\.css$/],
exclude: [/node_modules/, /masterpage\.css/, /\.global\./i],
use: [
MiniCssExtractPlugin.loader,
{
loader: "typings-for-css-modules-loader",
options: {
namedExport: true,
camelCase: true,
modules: true,
localIdentName: "[local]--[hash:base64:5]",
importLoaders: 1
},
},
"sass-loader",
],
},
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000",
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
// {
// enforce: "pre",
// test: /\.js$/,
// // exclude: [/node_modules/],
// loader: "source-map-loader",
// },
],
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
// externals: {
// "react": "React",
// "react-dom": "ReactDOM",
// },
plugins: [
new CleanWebpackPlugin(["dist"], { exclude: ["web.config"] }),
new webpack.WatchIgnorePlugin([
/\.d\.ts$/,
]),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new CopyWebpackPlugin([{
from: "../Deployment/SharePointcomponents/Branding/Images/CDN/logo.png",
},
{
from: "../Deployment/SharePointcomponents/Branding/Images/CDN/top-background.png",
},
{
from: "../Deployment/SharePointcomponents/Branding/Images/CDN/zeitbuchung.png",
},
{
from: "../Deployment/SharePointcomponents/Branding/Images/CDN/main-background.png",
},
{
from: "./weathericons",
to: "weathericons",
},
{
from: "./UserProfilePhoto",
to: "UserProfilePhoto",
},
{
from: "./font",
to: "posticon",
},
], {
context: __dirname,
},
),
// new webpack.SourceMapDevToolPlugin({
// filename: "maps/[file].map",
// exclude: "vendor",
// }),
],
optimization: {
splitChunks: {
chunks: "initial",
cacheGroups: {
default: false,
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all",
reuseExistingChunk: true,
priority: 20,
},
common: {
minChunks: 2,
name: "common",
chunks: "all",
reuseExistingChunk: true,
priority: 10,
},
},
},
},
stats: {
maxModules: 0,
hash: false,
children: false,
excludeAssets: [/.map/, /weathericons/],
entrypoints: false,
},
mode: "production",
};
and the report shows the scss-files still in the bundle:
If the current behavior is a bug, please provide the steps to reproduce.
What is the expected behavior?
The expected result would be, that the scss-files are left out of the js-bundles (like in webpack 3) and only remain in the css-files, which will result in less size.
Other relevant information:
webpack version: 4.15.1
Node.js version:
Operating System: Windows 10 x64
Additional tools:
It’s a major version release.
btw. there was no change regarding css minimizing in webpack, you probably also upgraded
css-loader
.