Cannot get webpack --watch or dev server to work using Lando to run a local Drupal environment-CodePudding

I've scoured the internet and have bits and pieces but nothing is coming together for me. I have a local Drupal environment running with Lando. I've successfully installed and configured webpack. Everything is working except when I try to watch or hot reload.

When I run lando npm run build-dev (that currently uses webpack --watch I can see my changes compiled successfully into the correct folder. However, when I refresh my Drupal site, I do not see that changes. The only time I see my updated JS changes are when I run lando drush cr to clear cache. Same things are happening when I try to configure the webpack-dev-server. I can get everything to watch for changes and compile correctly but I cannot get my browser to reload my files, they stay cached. I'm at a loss.

I've tried configuring a proxy in my .lando.yml , and have tried different things with the config options for devServer. I'm just not getting a concise answer, and I just don't have the knowledge to understand exactly what is happening. I believe it has to do with Docker containers not being exposed to webpack (??) but I don't understand how to configure this properly.

These are the scripts I have set up in my package.json , build outputs my production ready files into i_screamz/js/dist, build-dev starts a watch and compiles non-minified versions to i_screamz/js/dist-dev - start I have in here from trying to get the devServer to work. I'd like to get webpack-dev-server running as I'd love to have reloading working.

  "scripts": {
    "start": "npm run build:dev",
    "build:dev": "webpack --watch --progress --config webpack.config.js",
    "build": "NODE_ENV=production webpack --progress --config webpack.config.js"
  },

This is my webpack.config.js - no sass yet, this is just a working modular js build at this point.

const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

const isDevMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevMode ? 'development' : 'production',
  devtool: isDevMode ? 'source-map' : false,
  entry: {
    main: ['./src/index.js']
  },
  output: {
    filename: isDevMode ? 'main-dev.js' : 'main.js',
    path: isDevMode ? path.resolve(__dirname, 'js/dist-dev') : path.resolve(__dirname, 'js/dist'),
    publicPath: '/web/themes/custom/[MYSITE]/js/dist-dev'

  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new BrowserSyncPlugin({
      proxy: {
        target: 'http://[MYSITE].lndo.site/',
        proxyReq: [
          function(proxyReq) {
            proxyReq.setHeader('Cache-Control', 'no-cache, no-store');
          }
        ]
      },
      open: false,
      https: false,
      files: [
        {
          match: ['**/*.css', '**/*.js'],
          fn: (event, file) => {
            if (event == 'change') {
              const bs = require("browser-sync").get("bs-webpack-plugin");
              if (file.split('.').pop()=='js') {
                bs.reload();
              } else {
                bs.stream();
              }
            }
          }
        }
      ]
    }, {
      // prevent BrowserSync from reloading the page
      // and let Webpack Dev Server take care of this
      reload: false,
      injectCss: true,
      name: 'bs-webpack-plugin'
    }),
  ],
  watchOptions: {
    aggregateTimeout: 300,
    ignored: ['**/*.woff', '**/*.json', '**/*.woff2', '**/*.jpg', '**/*.png', '**/*.svg', 'node_modules'],
  }
};

And here is the config I have setup in my .lando.yml - I did have the proxy key in here but it's been removed as I couldn't get it setup right.

name: [MYSITE]
recipe: pantheon
config:
  framework: drupal8
  site: [MYPANTHEONSITE]
services:
  node:
    type: node
    build:
      - npm install
tooling:
  drush:
    service: appserver
    env:
      DRUSH_OPTIONS_URI: "http://[MYSITE].lndo.site"
  npm:
    service: node

settings.local.php

<?php

/**
 * Disable CSS and JS aggregation.
 */
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

CodePudding user response：

I've updated my code files above to reflect reflect a final working setup with webpack. The main answer was a setting in /web/sites/default/settings.local.php

**Disable CSS & JS aggregation. **

$config['system.performance']['css']['preprocess'] = FALSE; $config['system.performance']['js']['preprocess'] = FALSE;

I found a working setup from saschaeggi and just tinkered around until I found this setting. So thank you! I also found more about what this means here. This issue took me way longer than I want to admit and it was so simple. I don't know why the 'Disabling Caching css/js aggregation' page never came up when I was furiously googling a caching issue. Hopefully this answer helps anyone else in this very edge case predicament.

I have webpack setup within my theme root folder with my Drupal theme files. I run everything with Lando, including NPM. I found a nifty trick to switch the dist-dev and dist libraries for development / production builds from thinkshout.

I should note my setup does not include hot-reloading but I can at least compile my files and refresh immediately and see my changes. The issue I was having before is that I would have to stop my watches to drush cr and that workflow was ridiculous. I've never gotten hot reloading to work with with either BrowserSync or Webpack Dev Server and I might try to again but I need to move on with my life at this point.

I've also note included sass yet, so these files paths will change to include compilation and output for both .scss and .js files but this is the basic bare min setup working.