logo
down
shadow

CSS not extracted for common chunk with extract-text-webpack-plugin


CSS not extracted for common chunk with extract-text-webpack-plugin

By : Vesku
Date : November 21 2020, 03:00 PM
This might help you I have a very similar setup and managed to get it working. For me, the crucial part was to import common styles in .js files instead of in .scss files.
Here's my project in a nutshell:
code :
common/
  main.scss    <-- common styles
app/
  index.js
  main.scss    <-- styles specific for app
admin/
  index.js
  main.scss    <-- styles specific for admin
registration/
  index.js
  main.scss    <-- styles specific for registration
base.html
webpack.config.js
import '../common/main'   // <-- this did the trick!
import './main'

// some js...
const entries = {
  app: 'app/index.js',
  admin: 'admin/index.js'
  registration: 'registration/index.js',
};

const commonChunks = [
  'vendor',
  'common',
];

function isVendor(module) {
  if (typeof module.context !== 'string') {
    return false;
  }
  return module.context.indexOf('node_modules') !== -1;
}

export default {
  entry: {...entries},

  // ...

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: '[name].bundle.js',
      minChunks: 2
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].bundle.js',
      chunks: [...Object.keys(entries), 'common'],
      minChunks: function(module) {
        return isVendor(module);
      }
    }),

    new ExtractTextPlugin({
      filename: '[name].bundle.css'
    }),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'base.html'),
      filename: 'app.html',
      chunks: [...commonChunks, 'app'],
      chunksSortMode: 'manual'
    }),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'base.html'),
      filename: 'admin.html',
      chunks: [...commonChunks, 'admin'],
      chunksSortMode: 'manual'
    }),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'base.html'),
      filename: 'registration.html',
      chunks: [...commonChunks, 'registration'],
      chunksSortMode: 'manual'
    })
  ]
};
@import '../common/main'

// styles specific for app


Share : facebook icon twitter icon
Avoiding output duplication using webpack, less-loader and extract-text-webpack-plugin

Avoiding output duplication using webpack, less-loader and extract-text-webpack-plugin


By : Munna
Date : March 29 2020, 07:55 AM
I hope this helps . The @import syntax supports the ability to include your Less file without generating any output via the reference keyword.
code :
@import (reference) 'common.less';
webpack extract css into separate file using extract-text-webpack-plugin

webpack extract css into separate file using extract-text-webpack-plugin


By : Leandro Gomes
Date : March 29 2020, 07:55 AM
I wish this helpful for you i was able to figure this out.
my webpack configuration was correct.
code :
 entry: {
        index: "./scripts/index.js",
        vendor: "./styles/yourcss.css"
    }
Entrypoint undefined = extract-text-webpack-plugin-output-filename in webpack 4?

Entrypoint undefined = extract-text-webpack-plugin-output-filename in webpack 4?


By : Felice
Date : March 29 2020, 07:55 AM
may help you . Webpack documentation advises against using extract-text-webpack-plugin for css
code :
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',
  entry: ['./src/app.js', './src/main.scss'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.css',
    }),
  ],

  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      name: true,

      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

  devServer: {
    contentBase: './'
  }
};
Create link tag for webpack mini-css-extract-plugin extracted file without HTML

Create link tag for webpack mini-css-extract-plugin extracted file without HTML


By : Arvind
Date : March 29 2020, 07:55 AM
Webpack: extract common modules from entry and child chunks to separate commons chunk

Webpack: extract common modules from entry and child chunks to separate commons chunk


By : Erick Fahesf
Date : March 29 2020, 07:55 AM
it fixes the issue You need to create a webpack DLL that contains all your commonly used libs.
https://webpack.js.org/plugins/dll-plugin/
Related Posts Related Posts :
  • Integration Testing with Kitchen CI
  • Can't seem to get the from <asp:Literal </asp:Literal> property in Web forms
  • Can't access faraday params on views
  • RQM testNG integration
  • How can I enable unit templates?
  • Displaying multiple colors on a single data bar
  • Loading aggregates on reacting to domain events
  • Integrating Azure Cognitive services with Robotic Process Automation
  • Autodesk Forge Design Automation quota
  • Why can i not login to the wso2 api store using the email address of a secondary user store account
  • order not working with sortWhitelist
  • config.site for vendor libs on Fedora x86_64
  • Getting a limit response from Loopback, when no authentication is provided
  • What is the effect of FeedOptions.EnableLowPrecisionOrderBy Property
  • Recordset Null Value not being detected in null check
  • How to connect to an arbitary database using FaaS?
  • SourceTree not working after Windows 10 Fall Creators Update
  • How to get all registered user from Openfire through http
  • Error "invalid parameter" when launching a converted app
  • Using react-sortable-hoc with react-virtualized Grid
  • Xamarin.Forms: How to set values in Style only on specific platform
  • ZSH avoid adding empty commands to history?
  • Grep regular expression - Pattern issue
  • Unable to connect via Java to a DSE graph
  • Check if attachment is up to date with current document revision in couchdb
  • Can I bind an argument value ahead of time when using redux-actions?
  • How to change a member field with Kotlin reflection?
  • Replaying merged streams individually
  • DevExpress GridColumn strange proportional sizing
  • Drools Decision table error : Error while creating KieBase
  • Kafka-Flink-Stream processing: Is there a way to reload input files into the variables being used in a streaming process
  • How to export and import nifi flow from one HDP to another HDP
  • map pointWidth to a single Datapoint in Column Chart
  • Pygame animating image by transforming it
  • Why is my Gdk/cairo class causing a segfault?
  • How to organize queues in Masstransit/RabbitMQ?
  • How to remove a collection element without EntityManager#remove(...) in Doctrine 2?
  • how to change the format of the return value of 'mnist.load_data()' to 'mnist_train.csv' in Keras?
  • CodeFights Interview Practice- Dynamic Programing : Basic : fillingBlocks
  • Accessing the built request details in Karate
  • How to draw a polyline with initial point in Leaflet
  • docusign transform pdf field with text tab as required
  • How to avoid "unused variable in a for loop" error
  • Clipping a polygon to only draw within a circle in Love2D
  • Can't import library in Python
  • Silverstripe - Turn modules on or off in config
  • How does shared memory work behind the scene in Linux?
  • Vue - how to bind table column to a data object?
  • OrientDB deep traversal until specific class
  • Static code analysis of Dockerfiles?
  • Is Batmobile Defy Mini a fake device?
  • Reverse a list to a range
  • Add multiple y-axis to SAPUI5 VizFrame Column Charts
  • Nightmare with rabbitmq.client versions
  • How to change timeout for a request in okhttp
  • How to support relative date parameters in Web Intelligence Report
  • cfEngine3 - class if package is installed
  • Count number of sentences in a string in SAS
  • Visit Last Loaded URL
  • What are the use cases to substitute cookbook array attribute in chef?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org