Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question