Is there a way to verify the output of webpack merge?

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"
                    ]
                }
            ]
        }

Answer №1

I encountered a similar issue while utilizing webpack 4. My configuration is divided into three separate files: common, dev, and prod; as outlined in the webpack documentation.

To display the merged config, you can use the following approach:

var merged_config = merge(common, {
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [ 
                    MiniCssExtractPlugin.loader,
                    'css-loader', 
                    'less-loader'
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
});

module.exports = merged_config;

console.log(JSON.stringify(merged_config));

As demonstrated in the code snippet above, I have overwritten rules to create a css bundle in production mode. Within my common config, I include the following:

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
            },
            { 
                test: /\.html$/, 
                loader: 'raw-loader' 
            },
            {
                test: /\.less$/,
                use: [ 
                    'style-loader',
                    'css-loader', 
                    'less-loader'
                ],
            }
        ]
    },

The outcome aligns with my expectations!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Press the button to load the following row

Here's how the button below works: it will display the key from the table posts($p), and when clicked, it will show the key of the current post. <button type="button" onclick="location.href ='{$baseurl}/view/{$p.key}/';">Next Post< ...

Retrieve the width and height of the browser once the user has adjusted the window size

Can the browser width and height be accessed after a user resizes the window? For instance, if the window is initially 1920 by 1080 and the user changes it to 500 by 500, is there a method in JavaScript or jQuery to retrieve these new dimensions? ...

The functionality of the WordPress Contact Form 7 Plugin becomes erratic when integrated into dynamically loaded AJAX content

I am currently facing a challenge with integrating the WordPress Contact Form 7 Plugin into a website I have built on WordPress. The theme of the site utilizes jQuery to override default link behavior and AJAX to load pages without refreshing the entire pa ...

Bringing in a JavaScript function from a local file into a Node.js

I've been struggling with this issue for a while now and I think it's because of my misunderstanding of how files are linked in node.js. My file structure looks like this: ./main_test.html ./js_test.js ./node_test.js The main_test.html file is ...

Resize event of an Angular2 application within an iframe has been triggered

My current project involves embedding an Angular2 application within a Liferay portlet using iframes. The Liferay tomcat server is hosted on a different domain than the Angular2 application, and I am facing challenges with dynamically resizing the iframe b ...

Retrieving a JavaScript variable from a different script file

I have a JavaScript script (a) with a function as follows: function csf_viewport_bounds() { var bounds = map.getBounds(); var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); var maxLat = ne.lat(); var maxLong = ne.lng(); ...

Creating packing features specifically designed for resolution within a reusable module

I've decided to revamp my Angular application based on John Papa's style guide (well, mostly) and my main focus is on improving modularity. The stumbling block I've encountered is with route resolves. So far, I've been using a global ap ...

Tips for Rectifying Axis Label Formatting in Highcharts while containing the contents within a div Tag

Take a look at the current appearance of the chart here: https://i.sstatic.net/j5IHb.png I am hoping to show a tooltip when someone hovers over one of the X-axis labels. To achieve this, I have adjusted the formatting as recommended here: labels: { useHTM ...

Relationship between multiple Mongoose instances linking to a single entity

Having an issue regarding mongoose and relationships. My "Athletes" collection has the following schema: var athletesSchema = mongoose.Schema({ name : String, regionName : String, age : Number, overallScore : Number, scores : { ordinnal : String, ...

What is the best way to extract data from the ajax.done() function?

My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...

Tool for React Development and Server Hosting

Looking for guidance on setting up the development environment and server for a new project I am undertaking to further my learning. My goal is to utilize ReactJS with Bootstrap. In my previous experience with ReactJS, the build and server were already con ...

What is the best way to ensure that libraries installed with `npm install` remain persistent while working with

Currently, I am setting up the Vue application frontend using webpack: vue init webpack frontend cd frontend One of the dependencies I need for this app is axios, so I run: npm install axios After pushing the code to the repository and cloning it on a ...

Sorting elements to the beginning of each nested array

Looking to rearrange the elements in the given nested array, moving the element with the id 'cat_spc_my_special_id' to the top of the list using the keyword 'special'. There are 4 items currently in the above array, and the goal is to ...

The hyperlink to a different webpage does not trigger any JavaScript functionalities or render any CSS styles

I am facing an issue with linking HTML pages that run Javascript and JQuery Mobile from another HTML page. My link setup is as follows: <a href="hours.html">Hours</a> The linking page and the linked pages are in the same directory. However, ...

Display tables side by side using Material-UI

Presently, I am utilizing NextJs and MaterialUI to display a table with data fetched from an API created in Strapi. Challenge The current issue lies in using a table component with props that are imported into a page, where the props are mapped to an API ...

Is it possible to search for a value within an array of objects in MongoDB, where the value may be found in any object within that array?

Here is the schema: {"_id":"_vz1jtdsip", "participants":{ "blue":["finettix"] "red":["EQm"] }, "win":"red"," __v":0} I have multiple documents l ...

I seem to have misplaced the plot here, but can someone explain why this tiny snippet of JavaScript isn't functioning properly?

I am looking to create a universal error handler for all my forms var errorHandler = function() { var $errorBox = $('#form-error'); return { add: function(errors) { if ($errorBox.length === 0) { $erro ...

Displaying the state in NextJS rather than revealing server error messages

I recently implemented a register page on my NextJS app where users can input their information. Once the registration is successful, the form clears and a success message is displayed. However, I encountered an issue after adding the success message. Now ...

What steps are involved in launching an outdated Angular project?

Tasked with reviving an old Angular client in my company, I found myself grappling with outdated files and missing configurations. The lack of package.json, package-lock.json, and angular.json added to the confusion, while the presence of node modules in t ...

AngularJS: Challenges with Binding in event handlers within ng-repeat loops

I'm currently working on a project where I need to display buttons for choosing a username using ng-repeat. The display of the buttons is working fine, however, I have encountered an issue with the ng-click directive within the loop. Even though the b ...