Currently, I am in the process of developing a Web Application utilizing the MEAN stack.
For bundling my files, I have implemented webpack.
Within my project, there are two main folders: 1.public/assets (which contains subfolders like CSS, js, etc. housing various JS and CSS files) and 2.client (where I keep my AngularJS code such as controllers.js and services.js).
Webpack is also being used to bundle my client code.
const path = require('path');
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
mode: 'development',
target: 'web',
entry: {
app: glob.sync('./client/*.js'),
},
output: {
path: path.resolve(__dirname, outputDirectory),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
loader: 'url-loader?limit=100000',
},
],
},
devServer: {
port: 3005,
open: false,
disableHostCheck: true,
proxy: {
'/': 'http://localhost:8005',
},
},
plugins: [
new CleanWebpackPlugin([outputDirectory]),
],
};
My current focus is on bundling my client folder and compiling it into app.bundle.js. However, I am unsure about how to compile the assets folder.
Important Note: I am utilizing AngularJS v1 in this project.