title: Webpack, gulp and frontstreet framework in wordpress
body: <p>I try to add <a href="https://github.com/themeblvd/frontstreet" rel="nofollow noreferrer">https://github.com/themeblvd/frontstreet</a> frontstreet framework to Wordpress.</p>
  
  <p>I have pre-built asset "frontstreet.js" in wp-content/themes/front-theme/js/frontstreet.js
  In the same localization I put my custom "scripts.js" file to import modules. For test I type alert </p>
  
  <pre><code>import $ from 'jquery';
  
  alert("test");
  </code></pre>
  
  <p>I run the site by gulp watch and it is working properly, with framework CSS classes. But no alert and console don't show any error. I think gulp doesn't see my "scripts.js" file.</p>
  
  <p><strong>EDIT</strong> In terminal I have error:</p>
  
  <p>ERROR in Entry module not found: Error: Can't resolve './wp-content/themes/front-theme/js/scritps.js' in '/Applications/MAMP/htdocs/front'</p>
  
  <p>Gulp settings:</p>
  
  <pre><code>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) =&gt; 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(cb) {
      browserSync.reload();
      cb()
    });
    gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
    gulp.watch([settings.themeLocation + 'js/src/js/blocks/*.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()).pipe(browserSync.reload());
  }))
  
  gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
    browserSync.reload();
    cb()
  }))
  
  </code></pre>
  
  <p>Webpack config </p>
  
  <pre><code>const path = require('path'),
  settings = require('./settings');
  
  module.exports = {
    entry: {
      App: settings.themeLocation + "js/scritps.js"
    },
    output: {
      path: path.resolve(__dirname, settings.themeLocation + "js"),
      filename: "frontstreet.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    },
    mode: 'development'
  }
  
  </code></pre>
  
  <p>settings file</p>
  
  <pre><code>exports.themeLocation = './wp-content/themes/front-theme/';
  exports.urlToPreview = 'http://localhost:8888/front/';
  
  </code></pre>
  
  <p>this is my Wordpress functions.php </p>
  
  <pre><code>// add frontstreet pre-built
      wp_enqueue_script('frontstreet-js', get_theme_file_uri('/js/frontstreet.js'), NULL, '1.0', true);
  </code></pre>