T
T
thehighhomie2017-09-27 10:39:36
css
thehighhomie, 2017-09-27 10:39:36

Webpack: 3rd party library into separate file?

Please help me figure out how to build external libraries into your file.
For example, there are many small style files and are collected into one file using ExtractTextPlugin.
Now when I wanted to connect the third-party normalize.css library, I stopped in confusion, namely, I can’t output a separate css file with the same name with the ExtractTextPlugin plugin - normalize.css
webpack config:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('css/[name].css');
const extractSASS = new ExtractTextPlugin('css/app.css');

module.exports = {

  entry: path.join(__dirname, 'src', 'index.js'),

  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  devtool: 'eval',

  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader' ])
      },
      {
        test: /\.scss$/,
        use: extractSASS.extract([
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },
          { loader: "sass-loader", }
        ])
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  plugins: [
    extractCSS,
    extractSASS
  ]

};

index.js:
import React, { Component } from 'react';
import { render } from 'react-dom';
import 'normalize.css';
import 'animate.css';
import './index.scss';
import App from './components/App/App.jsx';

render( <App />, document.getElementById('root') );

And the problem is that both normalize.css and animate.css are going into one file: main.js. wtf??? I don’t understand how, because when initializing the plugin, I specified a mask for generating names:
const extractCSS = new ExtractTextPlugin('css/[name].css');

What kind of nonsense and how can I achieve the result? I even installed local css files instead of external ones and are also assembled into one main.js.
And everything is ok with SASS files, app.css builds fine.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question