CODEWITHSUNDEEP
csswebpack
Aleskei Sakharov
Aleskei Sakharov

Reputation: 103

extract-text-webpack-plugin not extracting css

When I created chunk with the help of CommonChunkPlugin, extract-text-webpack-plugin doesn`t extract css from landings chunk. Any ideas?

config: {
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        chunks: [
            'vzr',
            'vzrProduct',
            'emptyProduct'
        ],
        async: 'landings'
    }),
    new ExtractTextPlugin({
        filename: '[name].[contenthash].css',
        allChunks: true
    })
  ]
}

Upvotes: 0

Views: 209

Answers (2)

Aleskei Sakharov
Aleskei Sakharov

Reputation: 103

I added the function into minChunk and problem is solved. CommonChunkPlugin stopped to extract css and less modules 

config: {
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        chunks: [
            'kaskoLanding',
            'kaskoLandingProduct',
            'kaskoCalculator',
            'kaskoCalculatorProduct',
            'osagoCalculator',
            'osagoCalculatorProduct',
            'vzr',
            'vzrProduct',
            'emptyProduct'
        ],
        minChunks: (module, count) => {
            if (module.resource && (/^.*(css|less)$/).test(module.resource)){
                return false;
            }

            return count >= 9;
        },
        async: 'landings'
    }),
    new ExtractTextPlugin({
        filename: '[name].[contenthash].css',
        allChunks: true
    })
]

}

Upvotes: 0

Siya Mzam
Siya Mzam

Reputation: 4705

Javascript Objects must have a key and value separated by a colon. In your case, you have plugins: {} and inserting to this a series of functions, which we may call keys, but that are not followed by a colon and a value but a comma.

According to this plugins are not an object but an array of values. So, instead of:

config: {
  plugins: {
    new webpack.optimize.CommonsChunkPlugin({
      chunks: [
        'vzr',
        'vzrProduct',
        'emptyProduct'
      ],
      async: 'landings'
  }),
  new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
    allChunks: true
  })
}

}

Rather:

config: {
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      chunks: [
        'vzr',
        'vzrProduct',
        'emptyProduct'
      ],
      async: 'landings'
    }),
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      allChunks: true
    })
  }
]

Upvotes: 1

Related Questions