Webpack Not Bundling Output JS Files

Question

None of the output js bundle files are being created nor show up in the directory, although the output from the terminal says these files are being built...

I have tried following several tutorials in order approach this problem from different angles, but I still cannot figure out what is preventing my output bundle files from being created.

These are the versions I'm running:

• npm - 6.9.0

• Node - 10.15.0

• Webpack - 3.5.6

The following is my webpack.config.js file:

const autoprefixer = require('autoprefixer');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require('glob');

function tryResolve_(url, sourceFilename) {
  try {
    return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
  } catch (e) {
    return '';
  }
}

function tryResolveScss(url, sourceFilename) {
  const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;
  return tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),
      sourceFilename);
}

function materialImporter(url, prev) {
  if (url.startsWith('@material')) {
    const resolved = tryResolveScss(url, prev);
    return {file: resolved || url};
  }
  return {file: url};
}


module.exports = [{
  entry: {
    radio: './src/radio.js',
    index: './src/index.js',
    radioStyle: './src/radio.scss',
    indexStyle: './src/index.scss'
    },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          { loader: 'sass-loader',
            options: {
              importer: materialImporter,
              includePaths: glob.sync('node_modules').map((d) => path.join(__dirname, d))
            }
          },
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ]
  },
}];

The following is my package.json file:

{
  "name": "my-radio",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "dependencies": {
    "@material/button": "^1.1.0",
    "@material/card": "^1.1.0",
    "@material/ripple": "^1.1.0",
    "@material/top-app-bar": "^1.1.0",
    "@material/typography": "^1.0.0",
    "material-components-web": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "autoprefixer": "^9.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

As I understand, this code is supposed to output "radio.bundle.js", "radioStyle.bundle.js", "index.bundle.js", and "indexStyle.bundle.js" into my /dist folder:

entry: {
    radio: './src/radio.js',
    index: './src/index.js',
    radioStyle: './src/radio.scss',
    indexStyle: './src/index.scss'
    },
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

But after I npm start and get a "Compiled successfully" message, I can't find these files anywhere in my directory.

This is my project structure:

dist

docs
 proj-dir-structure.odt
node_modules
src
 index.js
 index.scss
 radio.js
 radio.scss
bundle.css
bundle.js
index.html
package.json
package-lock.json
radio.html
webpack.config.js

Answer 1

Your package.json has below scripts

"scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
}

npm start will invoke webpack-dev-server. This will build all the files in your dependency graph and keep it in-memory. This helps the webpack-dev-server to detect change in files and trigger auto-reload. The built files will not be available physically

npm run build will invoke webpack -p. This will generate the output bundle which you would deploy in production. You can find the generated files in your dist folder

You have to execute npm run build to view the generated webpack output