Answer the question
In order to leave comments, you need to log in
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
]
};
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') );
const extractCSS = new ExtractTextPlugin('css/[name].css');
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question