Front Webpack

What is Webpack?

webpack is a module bundler for modern JavaScript applications. If you don't know it, Please go here before reading further. >> Webpack Documentation
This project is built with webpack, you just have to install the packages with

npm install

and then, to run the project with

npm run dev

OR

npm run build

---

Configuration file

If you want to modify the webpack configuration, let us help you! We will explain the content of this file. It is a basic webpack file with few modifications, if you are familiar with webpack you will survive.
For the moment at least ;).

We will separate the file for a better understanding.

Full file webpack.config.js:

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  plugins:[
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
  ],
  module: {
    rules: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.vue$/, loader: 'vue-loader', options: {} },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.(png|jpg|gif|svg)$/, loader: 'file', options: {name: '[name].[ext]?[hash]'} }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
  },
  devServer: {
    inline: true,
    historyApiFallback: true,
    noInfo: true,
    port: 80,
    host: 'www.sharinfo.io',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

---

Let's begin!

entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

This part define the entry point of the application. the main javascript file. Here we target our main.js file present in the folder src/.
The output tells us where the final file will be written. The path is automatically resolved thanks to the path library. Public path and filename mean that when you will build your final application, you'll find a folder "dist" in your root folder (in our case "Front") with inside the file build.js containing everything you've made. Yes, the entire application into one file! For example our build.js weights about 6 mo when we build it.

plugins:[
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
],

This part defines the different plugins of the project and how to call them. We have only jQuery here. Basically these lines tell the app, we request the jQuery package we installed with node, when '$', 'jQuery' or 'jquery' is used in the code. Without these lines our jQuery package will be not recognized.
If you use CDN link to use jQuery, you don't need it, but it will add an overload cost to the user to get it.

  module: {
    rules: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.vue$/, loader: 'vue-loader', options: {} },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.(png|jpg|gif|svg)$/, loader: 'file', options: {name: '[name].[ext]?[hash]'} }
    ]
  },

Modules are rules to handle specific files when building. The order you declare them is very very important.
Here *.css files are handled by both style-loader and css-loader libraries, *.vue files by vue-loader, etc..
Babel is used to handle ES2015 / ES2016 scripts.

resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
},

This is a resolve configuration for Vue. Only needed if you use Vue.js.

  devServer: {
    inline: true,
    historyApiFallback: true,
    noInfo: true,
    port: 80,
    host: 'www.sharinfo.io',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  },
  devtool: '#eval-source-map'
}

This part describes the development server local hosting. Important values are the port (80 by default), the host (localhost by default) and the watchOptions (On the fly update).

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

These final lines are for the production build (with npm run build). Webpack will build the project, gathers all needed file and export everything in one file : build.js. The UglyfyJs plugin is used by default, compressing the code like a .min.js file.