Leveraging the power of Webpack 2 in conjunction with the extract-text-webpack

Currently utilizing extract-text-webpack-plugin version 2.0.0-rc.3 with Webpack version 2.2.1 and encountering an error during the build process:

/node_modules/extract-text-webpack-plugin/index.js:259
var shouldExtract = !!(options.allChunks || chunk.isInitial());
                                                  ^
TypeError: chunk.isInitial is not a function

Here is a snippet of my webpack.config.js:

'use strict';
const argv = require('yargs').argv;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

module.exports = (function () {
  let config = {
    entry   : './' + process.env.npm_package_config_paths_source + '/main.js',
    output  : {
      filename : 'main.js'
    },
    watch   : !!argv.watch,
    vue     : {
      loaders : {
        js   : 'babel-loader',
        sass : ExtractTextPlugin.extract("css!sass?sourceMap") 
      }
    },
    module  : {
      rules : [
        {
          test    : /\.js$/,
          use     : 'babel-loader',
          exclude : '/node_modules/'
        },
        {
          test    : /\.vue$/,
          use     : 'vue-loader',
          options : {
            loaders : {
              'scss' : 'vue-style-loader!css-loader!sass-loader',
              'sass' : 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
            },
          }
        }
      ]
    },
    plugins : [
      new webpack.DefinePlugin({
        'process.env' : {
          npm_package_config_paths_source : '"' + process.env.npm_package_config_paths_source + '"'
        }
      }),
      new ExtractTextPlugin("style.css")
    ],
    resolve : {
      alias : {
        'vue$' : 'vue/dist/vue.common.js'
      }
    },
    babel   : {
      "presets"  : ["es2015", "stage-2"],
      "comments" : false,
      "env"      : {
        "test" : {
          "plugins" : ["istanbul"]
        }
      }
    },
    devtool : "#source-map" 
  };

  if (process.env.NODE_ENV === 'production') {
    config.plugins = [
      new webpack.DefinePlugin({
        'process.env' : {
          NODE_ENV                        : '"production"',
          npm_package_config_paths_source : '"' + process.env.npm_package_config_paths_source + '"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin(),
      new ExtractTextPlugin("style.css")
    ];
    config.devtool = "#source-map";
  }

  return config;
})();

Removing

new ExtractTextPlugin("style.css")
from the plugins array allows the build to run without errors, but it does not generate the expected style.css file.

Upon adding the option allChunks: true, the error message changes to:

/node_modules/webpack/lib/Chunk.js:80
return this.entrypoints.length > 0;
                       ^
TypeError: Cannot read property 'length' of undefined

Answer №1

If you find yourself coding style rules in a .vue file or a separate .scss file, with the webpack configurations below, you can achieve your desired outcome:

Your webpack configuration:

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
        ....
        ....
module.exports = {
      ....
      ....
      module: {
          rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                  loaders: {
                    'scss': ExtractTextPlugin.extract('css-loader!sass-loader'),
                    'sass': ExtractTextPlugin.extract('css-loader!sass-loader?indentedSyntax')
                  }
                }
             },
              ....
              ....
              {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css-loader!sass-loader')
              }
              ....
              ....
          ] // end of rules
      }, // end of module
      plugins: [
          new ExtractTextPlugin('style.css')
      ],
      ....
  }

Ensure that you have installed the following modules/loaders using NPM:

  • css-loader
  • sass-loader
  • node-sass
  • extract-text-webpack-plugin

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

Trying out the ClientPortal in Next.JS with Jest Testing

I'm currently working with NextJS and I want to run tests on the ClientPortal component. My testing toolkit consists of Jest and React Testing Library. Below is a sample code snippet for the ClientPortal component: import { useEffect, useRef, useStat ...

Troubleshooting: The issue of Vue (v-on) not recognizing my function

I am brand new to Vue and JS, so please bear with me as I ask some "silly" questions. Within my Vue-Pet-Project, I have implemented a self-authored class module called Sudoku. In this module, I aim to find solutions using backtracking. Upon clicking the " ...

Adjust the CSS2D objects' visibility based on their parent THREE.js Group's visibility toggling

In my project using THREE.js, I have successfully added meshes and CSS2DObjects (labels) to a group. When I toggle the visibility of the group, the meshes change visibility as expected. However, the CSS2DObjects' visibility does not change accordingly ...

Vuejs - Enhancing User Experience with Multiple Unique Loading Indicators for Various States

I am in search of a spinner like the one showcased in this tutorial on Adding Loading Indicators to Your Vue.js Application. However, I need this spinner to function differently for various elements and states. For instance, when the first image is being ...

Is there a way to create submit buttons that trigger printing in HTML? Additionally, how can I design a text input that spans 100% width on the same line as a <span>, <p>, or <div>?

These are the files I have: .dir { color: white; font-family: "Lucida Console", Monaco, monospace; font-size: 16px; } .cmdline { font-family: "Lucida Console", Monaco, monospace; background-color: black; border: 1px solid black; color: whi ...

Transform a JavaScript object array into a collection of individual values

Given a list of objects structured like this, I am looking to transform it into a list of values based on their corresponding IDs. Original = [ {id: 1, value: 12.2494, time: "00:00:00.14"}, {id: 1, value: 4.5141, time: "00:00:01.138"}, {id: 1, ...

Having trouble loading a static image using the [email protected] component via webpack

I am struggling to display a static image in my component called Top.js. To import the image, I have used the following code in Top.js: import logo from './images/logo.png' The path for logo.png is frontend/src/images/logo.png. Next, I tried ...

Error message in Angular 7: Issue with @ViewChild - Unable to access properties from undefined value (specifically 'next')

I have two components that I want to connect with each other. One component is a modal dialog containing a button that, when clicked, should advance the application to the next step. The second component is an Angular Material stepper. How can I achieve th ...

The Postman post request is successful, however when using Axios to make the same request to the URL, a

I am currently using a Rails backend in combination with a Vue frontend. When I make a request to http://localhost:3000/login and include the following request body: {"user": { "email": "<a href="/cdn-cgi/l/email- ...

The Scribd page function is experiencing technical difficulties and is currently not functioning as

I recently added the Scribd document viewer to my website, but I am encountering an issue with the setPage function not working properly. Could someone assist me in setting it up to only display the first 2 pages of the document? Please take a look at the ...

Action triggered by clicking a button for every individual table column button

Managing my visitor records is made easier with a visitor table that allows me to add and display visitors. Each entry in the table includes a set of sign-in and sign-out buttons placed in two columns. Whenever I click the sign-in button, the current times ...

Can the Automator tool capture a specific section of a website in a screenshot?

Is it possible to use automator to navigate through a store's website category and open each product in a new tab? Alternatively, is there a software that can extract all the product URLs from a specific website? For example, this website has 14 prod ...

setting a deadline for rendezvous with quasar version 1

Utilizing the quasar date component with restricted dates poses a challenge. In order to accomplish this, the documentation suggests utilizing the options prop which should be provided with an array or function. <template> <div class="q-pa- ...

Exploring the location.path in angularjs

Is there a way to use $location.path for redirection in angularjs? I have the configuration below: ngModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $urlRouterProvider. ...

What is the most efficient way to minimize the use of if statements in an Angular component when calling a specific function?

Currently, I am working on an Angular 7 temperature conversion application. Within my formGroup, there are inputs and outputs along with two multi-select dropdowns where users can choose the unit of temperature 'From' and 'To' for conve ...

Minimize duplication of HTML code by refraining from PHP usage

It seems like this task may be simple for some individuals. To prevent redundancy in code across multiple pages, my goal is to insert segments of HTML code without having to manually input all of the elements each time. It's similar to a page controll ...

When attempting to render a base64 string in an <img> tag using ReactJS, an error message ERR_INVALID_URL is displayed

I am currently working on displaying server-generated images (specifically matplotlib graphs) in a ReactJS module without needing to save the files on the server. To achieve this, I decided to use base64 to create an image string. When it comes time to sh ...

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

Use jQuery to place tags around the content of existing <li> elements

Using jquery, I have been able to successfully create a list by using the following code: $(list).append(item); (where list is the list reference and item consists of the $('<li>') elements being added). var item = $('<li>' ...

implementing datepicker on multiple textboxes in jQuery upon button click

I have the ability to show multiple text boxes using jQuery. I am now looking to add a datepicker to those text boxes. Any assistance in finding a solution would be greatly appreciated. Thank you in advance. ...