Develop Reference

js and css file path are not loaded by webpack5 when used with pug

I'm using pug and scss with webpack 5. I have kept main.js and main.css both bundled by webpack but still the path is not resolved tried specific js path in src folder but same thing, they are not loading.
structure is like:
src:
index.js
style:
index.scss
views:
pages:
home.pug
base.pug
Please help it out
error picture
webpack.config.js:-
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const IS_DEVELOPMENT = 'dev'
module.exports = {
entry: [
path.resolve(__dirname, 'src/index.js'),
path.join(__dirname, 'styles/index.scss')
],
output:
{
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, 'static') }
]
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, './views/pages/home.pug'),
minify: true
}),
new MiniCSSExtractPlugin({
filename: IS_DEVELOPMENT ? '[name].css' : '[name].[contenthash].css',
chunkFilename: IS_DEVELOPMENT ? '[id].css' : '[id].[contenthash].css',
})
],
module:
{
rules:
[
{
test: /\.(html)$/,
use: ['html-loader']
},
{
test: /\.(pug)$/,
use: ['html-loader', 'pug-html-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use:
[
{
loader: MiniCSSExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader'
}, {
loader: 'resolve-url-loader'
}, {
loader: 'sass-loader'
}
]
},
{
test: /\.(gltf|glb)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/models/'
}
}
]
},
{
test: /\.(jpg|png|gif|svg)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/images/'
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/',
name: 'fonts/[name].[ext]',
mimetype: 'application/font-woff',
publicPath: '../'
}
}
]
},
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader',
'glslify-loader'
]
}
]
}
}

Problem with compiling scss in webpack - webpack mixes old code with the new one

I cannot resolve problem with compiling scss...
I've started tu build a website in gulp and then I've changed everything to webpack. The problem is that right now old code is mixed with the new one... Example:
In code I have this:
&__logo {
&-icon {
width: 150px;
img {
width: 100%;
}
}
}
but in console I can see this (main.scss):
header .header__logo-icon {
width: 150px;
}
AND THIS:
header .header__logo-icon (_header.scss) {
padding: 1rem;
color: white;
}
Padding and color is from the old code. In main.css I have only version with padding and color.
My webpack config looks like this:
var path = require('path');
module.exports = {
entry: './js/script.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build',
filename: 'bundle.js'
},
watch: true,
mode: 'development',
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ['es2015'] }
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
'sass-loader'
]
},
{
test: /\.(jpg|jpeg|gif|png|csv)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'img',
outputPath: 'img'
}
}
}
]
}
};
And in script.js I have this:
require('../scss/main.scss');
Does anyone has idea how to fix it?
Thanks!

You should connect css + scss
{
test: /\.(css|sass|scss)$/,
use: [
'style-loader'
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
I recommend getting acquainted with some webpack-boilerplate on github

Setting up file-loader in webpack produces error during build time

This is how my webpack.config.babel.js looks like:
import path from 'path'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const out = path.resolve(__dirname, './dist')
const client = path.resolve(__dirname, './src/client')
export default {
entry: {
main: `${client}/index`,
plugins: `${client}/plugins`
},
output: {
path: `${out}`,
filename: 'js/[name].js',
chunkFilename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.jsx?/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/img/[name].[ext]'
}
}
]
}
]
},
optimization: {
runtimeChunk: {
name: 'manifest'
},
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -20,
chunks: 'all'
}
}
}
},
target: 'web',
cache: true,
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
}
So as you can see i'm using file-loader for png, svg, gif, and jpg.
I then import the image like this:
import img404 from '../../assets/img/404-error.svg'
but I keep getting this error:
I'm not really sure what I am doing wrong here :(
FYI: This actually saves the image in dist/assets/img/THE_ACTUAL_IMAGE_FILE as expected

How to use Sass-loader with React and Webpack?

I'm using React 16, Webpack 3 and Bootstrap 4 beta.
I'm trying to load .scss files into React using something similar to the following import styles from './styles/app.scss'. At the moment I am using import style from 'style-loader!css-loader!sass-loader!applicationStyles';. I would like to move away from using the sass-loader in the .js file.
Any help improving up my webpack config would also be most welcome as it's a mess...
Here's my webpack file:
const webpack = require('webpack');
const path = require('path');
const envFile = require('node-env-file');
require('babel-polyfill');
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
try {
envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'))
} catch (e) { }
module.exports = {
entry: [
'script-loader!jquery/dist/jquery.min.js',
'babel-polyfill',
'whatwg-fetch',
'./app/app.jsx',
],
externals: {
jQuery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jQuery',
'jQuery': 'jQuery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_KEY: JSON.stringify(process.env.API_KEY),
API_DOMAIN: JSON.stringify(process.env.API_DOMAIN),
API_FILE_DOMAIN: JSON.stringify(process.env.API_FILE_DOMAIN),
}
}),
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
modules: [
__dirname,
'node_modules',
'./app/api',
'./app/constants',
],
alias: {
applicationStyles: 'app/styles/app.scss'
},
extensions: ['.js', '.jsx']
},
devServer: { historyApiFallback: { index: 'public/index.html' }, },
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
},
// {
// loader: 'sass-loader',
// options: {
// includePaths: [ path.resolve(__dirname, './node_modules/bootstrap/scss')]
// },
// test: /\.scss?$/,
// },
{
loader: 'css-loader',
options: {
includePaths: [path.resolve(__dirname, './node_modules/react-table/react-table.css')]
},
test: /\.css?$/,
}
],
// I tried this but it gave me an error
// rules:[
// {
// test: /\.scss$/,
// use: [
// { loader: "style-loader" },
// { loader: "css-loader" },
// { loader: "sass-loader" }
// ]
// }
// ],
},
devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map'
};
Here are the imports in my App.jsx file
import 'bootstrap'
import style from 'style-loader!css-loader!sass-loader!applicationStyles';
import 'style-loader!react-table/react-table.css';

I added rules to my webpack - see below:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: { loader: 'babel-loader'}
},
{
test: /\.css?$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
]
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
so now I can just do:
import style from 'applicationStyles';
import 'react-table/react-table.css';

Make it more simple.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [
{
test: /\.(css|scss)$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},

{
test: /\.s[ac]ss$/i,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
modules: true,
localsConvention: "camelCase",
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
}
}

webpack.optimize.UglifyJSPlugin is producing junk JavaScript

Building my ES6 react project under OSX El Capitan using Webpack is a breeze. Something very weird happens when I do the same build on our pre-production environment, the built file comes out like this:
webpackJsonp([0],{102:function(module,exports,__webpack_require__) ...
...
var _createClass=function(){
function defineProperties(target,props){
for(;0<props.length;0++){
...
}
...
}
...
Take particular note of that for loop: for(;0<props.length;0++). That is very broken. What am I doing wrong? My config from UglifyJSPlugin:
new webpack.optimize.UglifyJsPlugin({
comments: false,
mangle: false,
compress: {
warnings: false
}
})
Any help would be very much appreciated.
Full Webpack Config:
module.exports = {
entry: {
isearch: 'components/isearch/index.js',
reactbundle: ['react', 'react-dom', 'whatwg-fetch', 'debounce-promise', 'deep-assign', 'redux', 'react-redux']
},
output: {
publicPath: '/assets/components/',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader', options: { includePaths: [] } },
{ loader: 'css-loader', options: { includePaths: [], modules: false } },
{ loader: 'sass-loader', options: { includePaths: [] } }
]
},
{
test: /\.gif$/,
exclude: '/node_modules/',
use: [{ loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', context: 'react' } }]
}
]
},
resolve: { extensions: ['.js', '.jsx', '.scss'] },
devtool: 'cheap-module-source-map',
plugins: [
new CleanWebpackPlugin(['components'], {
root: path.resolve(__dirname, '../../public/assets'),
verbose: true,
dry: false
}),
new webpack.optimize.CommonsChunkPlugin('reactbundle'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
comments: false,
mangle: false,
compress: {
warnings: false
}
})
]
};
Build Environment on which this fails: Ubuntu 12.04.5 LTS