Feature/webpack

.gitignore

@@ -3,3 +3,4 @@ bower_components
 .idea/
 **/*.DS_Store
 npm-debug.log
+dist/

.npmignore

@@ -0,0 +1,6 @@
+_img/
+config/
+src/
+index.html
+bower.json
+_gitattributes.txt

README.md

@@ -100,6 +100,23 @@ Percircle is also registered as a Bower package, so it can be pulled down using:
 bower install percircle
 ```
 
+<hr/>
+
+### Options
+| Option | Description | via configuration object | via data attribute | Default |
+| -- | -- | -- | -- | -- |
+| Animate | Whether to animate the progress bar on load (or view) | `{ animate: "true" }` | data-animate="true" | true |
+| Clock | Display a clock in the percircle | `{ perclock: true}` | data-perclock="true" | false |
+| Countdown | Display a countdown in the percircle | `{ perdown: true}` | data-perdown="true" | false |
+| Countdown seconds | The amount of seconds to countdown. | `{ secs: 15 }` | data-secs="15" | - |
+| Countdown time up text | Text to display when countdown has completed.	| `{ timeUpText: 'Complete!' }` | data-timeUpText="Complete!" | - |
+| Countdown reset on click | Whether to reset the countdown on percircle click | `{ reset: true }` | data-reset="true" | false 
+| DisplayTextAtZero | Whether to display text even when the percentage is 0 | `{ displayTextAtZero: true }` | n/a | false |
+| Progress bar color | The colour of the progress bar | `{ progressBarColor: '#6188ff' }` | data-progressBarColor="#6188ff" | empty (inherit from class or css) |
+| Text | Text to display inside the percirle | `{ percent: 65 }` | data-percent="65" | undefined (use percent value) |
+
+<hr/>
+
 ### Building Percircle Locally
 
 If you'd like to run the development version, `percirle` uses Gulp to automate basic tasks, like building.  Head over to https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md for more information.  First, clone the repository, then run:

config/webpack.common.js

@@ -0,0 +1,57 @@
+const path = require('path');
+const {
+  ProvidePlugin
+} = require('webpack');
+const {
+  CleanWebpackPlugin
+} = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const WebpackRTLPlugin = require('webpack-rtl-plugin');
+
+module.exports = env => ({
+  entry: {
+    percircle: './src/js/percircle.js',
+  },
+  module: {
+    rules: [{
+      test: /\.less$/,
+      use: [{
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            hmr: env.development,
+          },
+        },
+        'css-loader',
+        {
+          loader: 'postcss-loader',
+          options: {
+            plugins: [
+              require('autoprefixer'),
+              env.production && require('cssnano')({})
+            ].filter(plugin => !!plugin)
+          }
+        },
+        'less-loader' // compiles Less to css
+      ]
+    }],
+  },
+  externals: {
+    jquery: 'jQuery'
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    }),
+    new WebpackRTLPlugin(),
+    new ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    })
+  ],
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+});

config/webpack.dev.js

@@ -0,0 +1,10 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = env => merge(common(env), {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    index: '../index.html'
+  },
+});

config/webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = env => merge(common(env), {
+  mode: 'production',
+  devtool: 'source-map'
+});