CODEWITHSUNDEEP
javascriptwebpackminify
namra
namra

Reputation: 127

Can I minify file separately with webpack?

I have a project with a lot of JavaScript files separate in several folders.

root
 | - index.html
 | - lib
 | -- jquery-ui.js
 | -- jquery.js
 | -- html2canvas.js
 |  
 | - js
 | -- main.js
 | -- app1.js
 | -- app2.js
 | -- app3.js

And O need to use webpack to minify these files separately in such a way that each file keep its path.

I don't want to have one single file with all code.

My current configuration:

const path = require('path');

module.exports = {
    entry:[
        './js/index.js',
        './pages/MCF/js/index.js',
        './pages/MCF/js/refresh.js',
        './pages/MCF/lang/index.js',
        './pages/MCF/lib/scriptJs/script.js',
        './pages/MCF/lib/scriptJs/load.js'
        ],
    output :{
        path :path.resolve('./prod/js'),
        filename: "app.min.js"
    },
    module:{
        rules:[
        {
            test:/\.js$/,
            exclude: /(node_modules|bower_components)/,
            use:['babel-loader']
        }
        ]
    }
}

Upvotes: 1

Views: 2951

Answers (2)

LinuxDisciple
LinuxDisciple

Reputation: 2379

You can also tweak @Jai's example by using an IIFE to generate the object that gets assigned to entry. The example below contains a function that lets you specify the directory; then the function will add each file with its original name.

An additional clarification: the [name] value comes from the property name in the entry object, so the property:

main: './js/index/js',

with the output filename set to:

filename: "[name].min.js

gives you an output file of:

./js/index.js

const fs = require('fs');
const path = require('path');
module.exports = {
  entry: (() => {
    //Use an IIFE to generate the 'entry' object

    //We're inside a function now so we can just write code.

    //Make an object to hold all the properties:
    const toReturn = {};

    //This function will find files in a path we specify, and add a property
    // to our toReturn object for it using the name of the file it found
    const addFiles = (dirpath) =>
      fs.readdirSync(dirpath).forEach((f) => {
        toReturn[f.split('.').slice(0, -1).join('.')] = dirpath + "/" + f;
      });
    //We've several ways to add new properties (aka output files). Here are three:

    //#1: add each script in a specified directory as its own output file using the original script's name:
    //This will generate the 'script' and 'load' properties like @Jai's example
    //Note that it will also generate similar entries for any other files in that dir
    addFiles("./pages/MCF/lib/scriptJs");

    //This will generate the 'refresh' property like @Jai's example
    addFiles("./pages/MCF/js");

    //#2 Add one script at a time so we can specify a different output name
    toReturn["main"] = "./js/index.js";
    toReturn["main2"] = "./pages/MCF/js/index.js";
    toReturn["langindex"] = "./pages/MCF/lang/index.js";

    //#3 Make bundles by specifying an output name and an array of input files:
    toReturn["refreshAndLoad"] = [
      "./pages/MCF/js/refresh.js",
      "./pages/MCF/lib/scriptJs/load.js",
    ];
    return toReturn;
  })(),
  output :{
    path :path.resolve('./prod/js'),
    filename: "[name].min.js"
  },
...
}

This will generate every entry that was manually added in @Jai's example, plus entries for the other files in the specified directories, plus that bundle added at the end.

Upvotes: 0

Jai
Jai

Reputation: 74738

You can take a reference from here for multiple-entry-points.

This is the way you should go for separate file builds: 

module.exports = {
  entry:{
    main      : './js/index.js',
    main2     : './pages/MCF/js/index.js',
    refresh   : './pages/MCF/js/refresh.js',
    langindex : './pages/MCF/lang/index.js',
    script    : './pages/MCF/lib/scriptJs/script.js',
    load      : './pages/MCF/lib/scriptJs/load.js'
    },
    output :{
      path :path.resolve('./prod/js'),
      filename: "[name].min.js"
    },
    ...
};

[name].min.js

This [name] would let you save a build for each entry as the name(key) given. The output will be: 

./prod/js/main.js, 
./prod/js/main2.js
// so on

Upvotes: 5

Related Questions