CSS/JS seem to not load... Any debug mode I could use to see what is tried to be loaded and if it fails?

[fredy31]

Im using WebpackIO and my files setting seem to be correct

files: [
    // If this has length === 1, then single compiler
    {
      name: "web",
      entry: {
        // 		// mention each non-interdependent files as entry points
        //      // The keys of the object will be used to generate filenames
        //      // The values can be string or Array of strings (string|string[])
        //      // But unlike webpack itself, it can not be anything else
        //      // <https://webpack.js.org/concepts/#entry>
        //      // You do not need to worry about file-size, because we would do
        //      // code splitting automatically. When using ES6 modules, forget
        //      // global namespace pollutions 😉
        // 		vendor: './src/mobile/vendor.js', // Could be a string
        main: ["./assets_src/js/main.js", "./assets_src/scss/styles.scss"], // Or an array of string (string[])
      },
      // 	// Extra webpack config to be passed directly
      webpackConfig: webpackOverrideCallback,
    },
    // If has more length, then multi-compiler
  ],

When I build the site it works, but when I 'start' the server I load my webpage with seemingly no css or js. Both seem to be allright.

So now I'm trying to debug, but there is seemingly no 'debug mode' to see what fails.

So is there a debug mode I could use?

PS: Here is my full wpackio.project.js if that helps with you.

const pkg = require("./package.json");
const {
  getFileLoaderOptions,
  issuerForNonStyleFiles,
  issuerForStyleFiles,
} = require("@wpackio/scripts");
const CopyPlugin = require("copy-webpack-plugin");
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const imageminMozjpeg = require("imagemin-mozjpeg");
const ImageminWebpWebpackPlugin= require("imagemin-webp-webpack-plugin");

const webpackOverrideCallback = (config, merge, appDir, isDev) => {
  // just part of webpack config concerning our SVG
  const configWithSvg = {
    module: {
      rules: [
        // This rule handles SVG for JS/TS files
        {
          test: /(\.svg(\?v=\d+\.\d+\.\d+)?)$/,
          use: [
            {
              loader: "file-loader",
              options: getFileLoaderOptions(appDir, isDev, false),
            },
          ],
          issuer: issuerForNonStyleFiles,
        },
        // This rule handles SVG for style files
        {
          test: /(\.svg(\?v=\d+\.\d+\.\d+)?)$/,
          use: [
            {
              loader: "file-loader",
              options: getFileLoaderOptions(appDir, isDev, true),
            },
          ],
          issuer: issuerForStyleFiles,
        },
      ],
    },
    plugins: [
      new CopyPlugin([
        { from: "assets_src/images", to: "images" },
        //{ from: 'assets_src/fonts', to: 'fonts' },
      ]),
      new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i,
        optipng: {
          optimizationLevel: 3,
        },
        plugins: [imageminMozjpeg({ quality: 75 })],
      }),
      new ImageminWebpWebpackPlugin()
    ],
  };

  //console.log(merge(config, configWithSvg));
  // merge our custom rule with webpack-merge
  return merge(config, configWithSvg);
};

module.exports = {
  // Project Identity
  appName: "name", // Unique name of your project
  type: "theme", // Plugin or theme
  slug: "name", // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
  // Used to generate banners on top of compiled stuff
  bannerConfig: {
    name: "name",
    author: "",
    license: "UNLICENSED",
    link: "UNLICENSED",
    version: pkg.version,
    copyrightText:
      "This software is released under the UNLICENSED License\nhttps://opensource.org/licenses/UNLICENSED",
    credit: true,
  },
  // Files we need to compile, and where to put
  files: [
    // If this has length === 1, then single compiler
    {
      name: "web",
      entry: {
        // 		// mention each non-interdependent files as entry points
        //      // The keys of the object will be used to generate filenames
        //      // The values can be string or Array of strings (string|string[])
        //      // But unlike webpack itself, it can not be anything else
        //      // <https://webpack.js.org/concepts/#entry>
        //      // You do not need to worry about file-size, because we would do
        //      // code splitting automatically. When using ES6 modules, forget
        //      // global namespace pollutions 😉
        // 		vendor: './src/mobile/vendor.js', // Could be a string
        main: ["./assets_src/js/main.js", "./assets_src/scss/styles.scss"], // Or an array of string (string[])
      },
      // 	// Extra webpack config to be passed directly
      webpackConfig: webpackOverrideCallback,
    },
    // If has more length, then multi-compiler
  ],
  // Output path relative to the context directory
  // We need relative path here, else, we can not map to publicPath
  outputPath: "assets_dist",
  // Project specific config
  // Needs react(jsx)?
  hasReact: false,
  // Needs sass?
  hasSass: true,
  // Needs less?
  hasLess: false,
  // Needs flowtype?
  hasFlow: false,
  // Externals
  // <https://webpack.js.org/configuration/externals/>
  externals: {
    jquery: "jQuery",
  },
  // Webpack Aliases
  // <https://webpack.js.org/configuration/resolve/#resolve-alias>
  alias: undefined,
  // Show overlay on development
  errorOverlay: true,
  // Auto optimization by webpack
  // Split all common chunks with default config
  // <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
  // Won't hurt because we use PHP to automate loading
  optimizeSplitChunks: true,
  // Usually PHP and other files to watch and reload when changed
  watch: "**/*.php",
  // Files that you want to copy to your ultimate theme/plugin package
  // Supports glob matching from minimatch
  // @link <https://github.com/isaacs/minimatch#usage>
  packageFiles: [
    "inc/**",
    "vendor/**",
    "assets_dist/**",
    "*.php",
    "*.md",
    "readme.txt",
    "languages/**",
    "layouts/**",
    "LICENSE",
    "*.css",
    "templates/**",
    "includes/**",
    "partials/**",
  ],
  // Path to package directory, relative to the root
  packageDirPath: "package",
};

[fredy31]

Today I've learned the importance of having slug be the same as your WP theme.