Discussion on: How to configure Webpack 4 or 5 from scratch for a basic website

[rajat singh]

Hi Anton,

i am using babel-loader..

this is my gulpfile

var gulp = require('gulp'),
settings = require('./settings'),
webpack = require('webpack'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
rgba = require('postcss-hexrgba'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
colorFunctions = require('postcss-color-function');

gulp.task('styles', function() {
return gulp.src(settings.themeLocation + 'css/style.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
.on('error', (error) => console.log(error.toString()))
.pipe(gulp.dest(settings.themeLocation));
});

gulp.task('scripts', function(callback) {
webpack(require('./webpack.config.js'), function(err, stats) {
if (err) {
console.log(err.toString());
}
console.log(stats.toString());
callback();
});
});

gulp.task('watch', function() {
browserSync.init({
notify: false,
proxy: settings.urlToPreview,
ghostMode: false
});

gulp.watch('..//*.php', function() {
browserSync.reload();
});
gulp.watch(settings.themeLocation + 'css//.css', gulp.parallel('waitForStyles'));
gulp.watch([settings.themeLocation + 'js/modules/.js', settings.themeLocation + 'js/scripts.js'], gulp.parallel('waitForScripts'));
});

gulp.task('waitForStyles', gulp.series('styles', function() {
return gulp.src(settings.themeLocation + 'style.css')
.pipe(browserSync.stream());
}))

gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
browserSync.reload();
cb()
}))

---

*and following is my webpack configuration *

const path = require('path'),
settings = require('./settings');

module.exports = {
entry: {
App: settings.themeLocation + "js/scripts.js"
},
output: {
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
mode: 'development'
}

following is how i am importing the 3rd party libraries ..
import $ from 'jquery';
import slick from 'slick-carousel';

i tried to use the plugin configuration in webpack setting also but no luck.

[rajat singh]

Hi Anton,

i added following line in my webpack configuration with absolute path of my node_modules and now its able to build..

resolve: {
modules: [
'__dirname','/Users/rajat.c.singhaccenture.com/Local\ Sites/cp-unique-convent-school/app/public/build-setup/node_modules'
]