build: add webpack

Author: robertoachar

package.json

@@ -12,8 +12,9 @@
     "src"
   ],
   "scripts": {
-    "lint": "eslint src/**/*.js",
-    "start": "node src/index.js"
+    "build": "webpack --env.mode=prod",
+    "lint": "eslint statik/**/*.js",
+    "start": "webpack-dev-server --env.mode=dev"
   },
   "repository": {
     "type": "git",
@@ -22,12 +23,35 @@
   "bugs": {
     "url": "https://github.com/statikstack/html-stylus-javascript-webpack/issues"
   },
-  "dependencies": {},
+  "dependencies": {
+    "normalize.css": "8.0.0"
+  },
   "devDependencies": {
+    "autoprefixer": "8.6.5",
+    "babel-core": "6.26.3",
+    "babel-loader": "7.1.5",
+    "babel-preset-env": "1.7.0",
+    "clean-webpack-plugin": "0.1.19",
+    "css-loader": "1.0.0",
     "eslint": "5.1.0",
     "eslint-config-prettier": "2.9.0",
     "eslint-plugin-prettier": "2.6.2",
-    "prettier": "1.13.7"
+    "file-loader": "1.1.11",
+    "html-loader": "0.5.5",
+    "html-webpack-plugin": "3.2.0",
+    "image-webpack-loader": "4.3.1",
+    "mini-css-extract-plugin": "0.4.1",
+    "optimize-css-assets-webpack-plugin": "5.0.0",
+    "postcss-loader": "2.1.6",
+    "prettier": "1.13.7",
+    "style-loader": "0.21.0",
+    "stylus": "0.54.5",
+    "stylus-loader": "3.0.2",
+    "uglifyjs-webpack-plugin": "1.2.7",
+    "webpack": "4.16.1",
+    "webpack-cli": "3.0.8",
+    "webpack-dev-server": "3.1.4",
+    "webpack-merge": "4.1.3"
   },
   "license": "MIT"
 }

webpack.config.js

@@ -0,0 +1,5 @@
+module.exports = (env) => {
+  const config = require(`./webpack/webpack.${env.mode}`);
+
+  return config;
+};

webpack/webpack.common.js

@@ -0,0 +1,62 @@
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: {
+    vendor: './statik/scripts/vendor.js',
+    app: './statik/scripts/app.js'
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve('dist')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: 'html-loader'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['env']
+          }
+        }
+      },
+      {
+        test: /\.(woff2?)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              useRelativePath: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(gif|jpg|png|svg|ico)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              useRelativePath: true
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(['dist'], { root: path.resolve() }),
+    new HtmlWebpackPlugin({
+      template: './statik/index.html'
+    })
+  ]
+};

webpack/webpack.dev.js

@@ -0,0 +1,22 @@
+const merge = require('webpack-merge');
+const path = require('path');
+
+const common = require('./webpack.common');
+
+module.exports = merge.smart(common, {
+  mode: 'development',
+  devtool: 'eval',
+  module: {
+    rules: [
+      {
+        test: /\.(css|styl)$/,
+        use: ['style-loader', 'css-loader', 'stylus-loader']
+      }
+    ]
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, 'dist'),
+    open: true,
+    port: 8080
+  }
+});

webpack/webpack.prod.js

@@ -0,0 +1,83 @@
+const autoprefixer = require('autoprefixer');
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
+
+const common = require('./webpack.common');
+
+module.exports = merge.smart(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  output: {
+    filename: '[name].[chunkhash].js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: {
+          loader: 'html-loader',
+          options: {
+            minimize: true
+          }
+        }
+      },
+      {
+        test: /\.(css|styl)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer()]
+            }
+          },
+          {
+            loader: 'stylus-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(gif|jpg|png|svg|ico)$/,
+        use: 'image-webpack-loader'
+      }
+    ]
+  },
+  optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      name: true,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all'
+        }
+      }
+    },
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: { discardUnused: false }
+      })
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[chunkhash].css'
+    }),
+    new UglifyJsWebpackPlugin({
+      sourceMap: true
+    }),
+    new webpack.HashedModuleIdsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+});