Webpack - trying to route/compile my CSS and JS files into CSS and JS specific sub-folders within dist/ folder - npm

Question

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.
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 npm run build (this would be the production command) to compile my CSS files into CSS and JS subfolders (off the root of the site) respectively.
I felt like I was making more progress with my attempts to use the file-loader package within my JS and CSS specific test blocks but now I'm wondering if I'm not either misunderstanding the purpose of the file-loader package or simply not configuring it correctly.
Here are the contents of my webpack.config.js file:
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'])
]
};
Here is the package.json file:
{
"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\" && 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"
}
}
And finally the app.js file
import '../css/styles.scss';
import 'babel-polyfill';
import $ from 'jquery';
Thanks in advance.

Answer 1

Putting assets into different subfolders does not make any differece in performance, nor in use since those are going to sit on your static server everytime until it is redeployed.
There is no way to output js files to js folder since there is no option on babel loader and file-loader does not handle js, they just emit the file, in your case it would endup with duplicated files at the end. File-loader is not ideal to work with javascript files.
For css, you can configure extract-text-plugin.
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: 'css/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']
}
}
]
},
{
test: /\.scss$/,
use: extractPlugin.extract({
use: ['css-loader', 'sass-loader']
})
},
{
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'])
]
};