Use webpack to build files and webpack-dev-server for testing (#1068)

* Create a separate entry point for webpack

Created a webpack entry point for KaTeX, which imports katex.less. As
flow[1] and jest[2] doesn't support CSS modules natively, a separate
entry point is used and it is not flowtyped.

[1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
[2] https://facebook.github.io/jest/docs/en/webpack.html

* Use webpack to build files

* Made webpack.config.js export valid webpack configuration
* Use:
browserify -> webpack
babelify -> babel-loader
UglifyJS CLI -> UglifyJsPlugin
Less CLI -> less-loader
cleancss -> cssnano in css-loader
build/fonts -> file-loader
* Inline CSS(Less) using style-loader and export them using
ExtractTextPlugin
* Add `watch` npm script calling `webpack --watch`

* Improve local testing(webpack-dev-server)

* Made webpackDevServer export a valid webpack configuration
* Compile Less and inline CSS using less-loader and style-loader
* Instead of copying files serve files from /static and use file-loader
* Remove old server.js and its dependencies

* Use webpack-dev-server in Screenshotter

* Include contrib in webpack-dev-server

+ Moved common configurations to webpack.common.js

* Rename webpackDevServer.js to webpack.dev...

to be consistent, avoid confusion with webpack-dev-server and follow
webpack configuration naming convention.

* Remove unnecessary conditional output.path

* Use map instead of reduce

+ Add comments regarding function arguments

* Remove unnecessary mkdir and clean build/* before build

* Use katex as external dependency instead of global variable in contrib

Fixes #692.

* Unblock codes as they are built as a module

* Update package-lock.json

* Add comments regarding devServer option

* Lint renamed webpack.dev.js

a0d8b33

* Export ES6 module and expose its default export

* Revert "Browserify hotfix (#1057)"

This reverts commit f6b509123b.

* Enables colors on the console when running the dev server in Screenshotter

* Add context to webpack configuration

Allows webpack to be run from other directories

* Move `rm -rf build/*` to npm scripts

* Check dependencies before build

* Move UglifyJsPlugin into config creation

* Let webpack handle ES6 modules

Do not transform modules to commonjs in Babel. However Jest doesn't not
support ES6 modules, so transfrom modules to commonjs when NODE_ENV is
`test`.

* Add documentation on testing in IE 9 and 10 using webpack-dev-server

Changed version range to include IE-compatible version

webpack.common.js

@@ -0,0 +1,121 @@
+// @flow
+const path = require('path');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const webpack = require('webpack');
+
+/*::
+type Target = {|
+    name: string, // the name of output JS/CSS
+    entry: string, // the path to the entry point
+    library?: string // the name of the exported module
+|};
+*/
+
+/**
+ * List of targets to build
+ */
+const targets /*: Array<Target> */ = [
+    {
+        name: 'katex',
+        entry: './katex.webpack.js',
+        library: 'katex',
+    },
+    {
+        name: 'contrib/auto-render',
+        entry: './contrib/auto-render/auto-render.js',
+        library: 'renderMathInElement',
+    },
+    {
+        name: 'contrib/copy-tex',
+        entry: './contrib/copy-tex/copy-tex.js',
+    },
+    {
+        name: 'contrib/mathtex-script-type',
+        entry: './contrib/mathtex-script-type/mathtex-script-type.js',
+    },
+];
+
+/**
+ * Create a webpack config for given target
+ */
+function createConfig(target /*: Target */, dev /*: boolean */,
+        minimize /*: boolean */) /*: Object */ {
+    const cssLoader = {
+        loader: 'css-loader',
+        options: {
+            minimize, // cssnano
+        },
+    };
+    return {
+        context: __dirname,
+        entry: {
+            [target.name]: target.entry,
+        },
+        output: {
+            filename: minimize ? '[name].min.js' : '[name].js',
+            library: target.library,
+            libraryTarget: 'umd',
+            libraryExport: 'default',
+            path: path.resolve(__dirname, 'build'),
+            publicPath: dev ? '/' : '',
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    use: 'babel-loader',
+                },
+                {
+                    test: /\.css$/,
+                    use: ExtractTextPlugin.extract({
+                        fallback: 'style-loader',
+                        use: [cssLoader],
+                    }),
+                },
+                {
+                    test: /\.less$/,
+                    use: ExtractTextPlugin.extract({
+                        fallback: 'style-loader',
+                        use: [cssLoader, {
+                            loader: 'less-loader',
+                        }],
+                    }),
+                },
+                {
+                    test: /\.(ttf|woff|woff2)$/,
+                    use: [{
+                        loader: 'file-loader',
+                        options: {
+                            name: 'fonts/[name].[ext]',
+                        },
+                    }],
+                },
+            ],
+        },
+        externals: 'katex',
+        plugins: [
+            new webpack.EnvironmentPlugin({
+                NODE_ENV: dev ? 'development' : 'production',
+            }),
+            minimize && new UglifyJsPlugin({
+                uglifyOptions: {
+                    output: {
+                        ascii_only: true,
+                    },
+                },
+            }),
+            new ExtractTextPlugin({
+                filename: minimize ? '[name].min.css' : '[name].css',
+                disable: dev,
+            }),
+        ].filter(Boolean),
+        devtool: dev && 'inline-source-map',
+    };
+}
+
+module.exports = {
+    targets,
+    createConfig,
+};