In the destination directory (/dist/) I would like to create three directories with IMAGES folder, CSS folder, JS folder, multi output directories similar to the following screenshoot:
My current entry looks something like this:
My webpack.config.js
looks something like this (this code works but it doesn't create the structure that I want ):
var path = require("path");
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const FileManagerPlugin = require('filemanager-webpack-plugin');
const extractCSS = new ExtractTextPlugin("css/[name]-1.0.0.css");
const extractSASS = new ExtractTextPlugin("es/[name].css");
module.exports = function(env) {
var isProd = false;
if (env != null && env.production) {
isProd = true;
}
var jsDev = "./js/[name]-bundle.js";
var jsProd = "./js/[name]-" + date_string() + ".js";
var configJs = isProd ? jsProd : jsDev;
return {
context: path.resolve(__dirname, "src"),
entry: {
specials: './js/specials.js',
checkout: './js/checkout.js',
mobile: './js/mobile.js',
screen: './js/screen.js',
custom: './js/app.js'
},
output: {
path: path.join(__dirname, "dist"),
filename: configJs
},
module: {
rules: [{
test: /\.css$/,
use: extractCSS.extract({
fallback: "style-loader",
use: "css-loader"
})
}, {
test: /\.scss$/,
use: extractSASS.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
}, {
test: /\.(jpg|svg|png|gif)$/,
exclude: /fonts/,
loaders: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './images/',
publicPath: ''
}
}]
}, {
test: /\.(eot|svg|ttf|woff|woff2)$/,
exclude: /images/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
publicPath: ''
}
}]
},
plugins: [
extractSASS
]
};
Any help will be appreciated,
Thank you,
Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project. In general it's good practice to clean the /dist folder before each build, so that only used files will be generated.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.
__dirname returns the the directory name of the current module. Let's take a look at some code that uses __dirname . Without webpack. This is what the output of it looks like.
Configuring the output configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple entry points, only one output configuration is specified.
Focus on this part of configuration:
var jsDev = "./js/[name]-bundle.js";
var jsProd = "./js/[name]-" + date_string() + ".js";
var configJs = isProd ? jsProd : jsDev;
output: {
path: path.join(__dirname, "dist"),
filename: configJs
},
If you change jsDev and jsProd to this:
var jsDev = "./[name]/[name]-bundle.js";
var jsProd = "./[name]/[name]-" + date_string() + ".js";
webpack will create folders with your entries names (specials, checkout etc.).
If you wish more advanced approach you may check this part of webpack documentation: https://webpack.js.org/configuration/output/#output-filename ,
especially the part:
Using function to return the filename:
module.exports = {
//...
output: {
filename: (chunkData) => {
return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
},
}
};
There are some resources you might want to also check:
https://hackernoon.com/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065
https://www.npmjs.com/package/webpack-entry-plus
https://www.npmjs.com/package/multiple-bundles-webpack-plugin
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With