Compress And Minify Multiples Javascript Files Into One, With Webpack?

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

Solution 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"