Compress and Minify multiples javascript files into one, with Webpack?

Question

I'm trying to concatenate, minify multiples javascript files into one, with webpack.

So my question can this be done with webpack? and How?

I tried a lot of ways, but couldn't get it to work as what I wanted.

Best I show examples.

3 javascript files.

app.js

var fnA = function () {
    console.log('fnA')
}

global.js

fnA();

main.js

require('./app.js');
require('./global.js');

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry : [
        './app/main.js'
    ],
    output : {
        path : path.resolve(__dirname, 'dist'),
        filename : 'bundle.js'
    },
    plugins : [
        new webpack.optimize.UglifyJsPlugin(
        {
            minimize: true,
            compress: false,
            mangle: {
                 keep_fnames: true
            },
            bare_returns : true
        }),
    ]
};

I'm expecting that global.js is able to call to any function in app.js . Probably this can be done with grunt, but I thought webpack can do this too.

Worry that I'm heading to a total wrong direction. Google around, but can't seem to find any solution, tried with other plugin suc as chunk, which doesn't helps.

Any advices are welcome. Thanks in advance.

Answer 1

I put together something simple but you need babel.

https://github.com/vpanjganj/simple-webpack-sample

This is your webpack config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [ "./app/main.js" ],
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },

  module: {
    rules: [
      { test: /\.js$/, use: [ { loader: 'babel-loader' } ], exclude: /node_modules/ }
    ]
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};

here your 2 modules:

First module, moduleOne.js :

export default function sayHello() {
   console.log('hello')
}

moduleTwo.js file:

export default function sayBye() {
   console.log('bye')
}

and your main.js file:

import sayHello from './moduleOne'
import sayBye from './moduleTwo'

const myApp = ()=>{
   sayHello();
   sayBye()
};

myApp();

The command to build:

$ ./node_modules/.bin/webpack  --color --display-error-details --config ./webpack.js"