title: Webpack - trying to route/compile my CSS and JS files into CSS and JS specific sub-folders within dist/ folder
body: <p>I'm pretty new to webpack in general.  Just a couple of days in really.  For the most part I feel like I've made some pretty good progress on at setting up and integrating webpack into my local development environment.  Quite a few bugs and command line errors along the way but I was able to work through most of them up to now.  Shout out to Maxmillian Schwärzmuller's short YT series on Webpack to get me started.</p>
  
  <p>Now I'm trying to re-purpose/expand on some of the concepts I've picked up however I'm not yet having any success getting my <code>npm run build</code> (this would be the production command) to compile my CSS files into CSS and JS subfolders (off the root of the site) respectively.</p>
  
  <p>I felt like I was making more progress with my attempts to use the <code>file-loader</code> package within my JS and CSS specific test blocks but now I'm wondering if I'm not either misunderstanding the purpose of the <code>file-loader</code> package or simply not configuring it correctly.</p>
  
  <p>Here are the contents of my <code>webpack.config.js</code> file:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  
  const extractPlugin = new ExtractTextPlugin({
     filename: 'styles.css'
  });
  
  module.exports = {
    entry: './src/js/app.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'app.bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['babel-preset-env']
              }
            }
            // attempted to replicate the same use statement as seen below for the jpg/png test
            // and only app.js (not app.bundle.js) was dropped into dist/js/
            // {
            //   loader: 'file-loader',
            //   options: {
            //     name: '[name].[ext]',
            //     outputPath: 'js/',
            //     publicPath: 'js/'
  
            //   }
            // }
          ]
        },
        {
          test: /\.scss$/,
          use: extractPlugin.extract({
            use: ['css-loader', 'sass-loader']
          })
          // attempted to modify/replicate the above use statement
            // use: [
              // {
                // loader: 'css-loader',
                // loader: 'sass-loader'
                // loader: 'file-loader',
                // options: {
                //   name: '[name].[ext]',
                //   outputPath: 'css/',
                //   publicPath: 'css/'
                // }
              // }
            // ]
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader'
            }
          ]
        },
        {
          test: /\.(jpg|png)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'images/',
                publicPath: 'images/'
              }
            }
          ]
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]'
              }
            }
          ],
          exclude: path.resolve(__dirname, 'src/index.html')
        }
      ]
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      extractPlugin,
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'src/index.html'
      }),
      new CleanWebpackPlugin(['dist'])
    ]
  };
  </code></pre>
  
  <p>Here is the <code>package.json</code> file:</p>
  
  <pre><code>  {
    "name": "nodomaintoseehere.com",
    "version": "1.0.0",
    "description": "Site repository v1.0",
    "private": true,
    "main": "./src/app.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "dev": "webpack-dev-server",
      "build": "webpack -p"
    },
    "author": "Jeremy Wilson",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.7.0",
      "babel-preset-es2015": "^6.24.1",
      "clean-webpack-plugin": "^0.1.19",
      "cross-env": "^5.2.0",
      "css-loader": "^1.0.0",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^1.1.11",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "jquery": "^3.3.1",
      "node-sass": "^4.9.3",
      "sass-loader": "^7.1.0",
      "webpack": "^3.12.0",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^2.11.2"
    },
    "dependencies": {
      "bootstrap": "^4.1.3",
      "lodash": "^4.17.10"
    }
  }
  </code></pre>
  
  <p>And finally the <code>app.js</code> file </p>
  
  <pre><code>import '../css/styles.scss';
  import 'babel-polyfill';
  import $ from 'jquery';
  </code></pre>
  
  <p>Thanks in advance.</p>