A
A
Alex2019-09-18 10:05:46
webpack
Alex, 2019-09-18 10:05:46

How to fix css-loader in webpack.config.js?

Good afternoon, I'm rebuilding the old assembly to the new one. Only compiled css and js are needed. An error occurs when parsing pictures ../images/ and fonts ./fonts. But I just need to rebuild the styles. Tell me how to disable the parsing of url addresses and fix it. url:false clears the addresses ..//images/ . config

let path = require('path');
let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let globImporter = require('node-sass-glob-importer');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let autoprefixer = require('autoprefixer');
let postcssclick = require('postcss-click');
let backgroundSvg = require('postcss-encode-background-svgs');
let cssnext = require('postcss-preset-env');
let animation = require('postcss-animation');
let stylelint = require('stylelint');
let CopyPlugin = require('copy-webpack-plugin');
let TerserJSPlugin = require('terser-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');


let conf = {

    mode: 'production',
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, '../../../../public_html/assets/new/'),
        filename: 'app.js'

    },
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    devServer: {
        overlay: true,
        port: 3010
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: "babel-loader",
                exclude: "/node_modules/"
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers: ['ie >= 8', 'last 4 version']
                                }),
                                postcssclick(),
                                cssnext(),
                                backgroundSvg(),
                                animation()
                            ],
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            importer: globImporter(),
                            sourceMap: true,
                        }
                    }
                ],

            },
            {
                test: /\.(pug|jade)$/,
                loader: 'pug-loader',
                options: {
                    pretty: true
                }
            },

            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                },
            },
            {
                loader: 'image-webpack-loader',
                options: {
                    mozjpeg: {
                        progressive: true,
                        quality: 70
                    }
                }
            },

            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]'
                    }
                }]
            }

        ]

    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        new HtmlWebpackPlugin({
            template: './index.pug'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new CopyPlugin([
            {from: '/images', to: 'images'},
            {from: '/fonts', to: 'fonts'}
        ]),
    ]

};

module.exports = conf;

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