feat: setting up webpack (#4)

erunion · Gabe Ratcliff · web-flow · commit fa651fc01152 · 2020-09-01T14:44:57.000-07:00
* feat: first pass at setting up webpack

* chore: adding support for dev-server

* chore: prettier linting

Co-authored-by: Gabe Ratcliff &lt;gaberatcliff@Meghans-MBP.attlocal.net&gt;
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
+dist/
 node_modules/
 coverage/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,10 @@
     "pretest": "npm run lint && npm run prettier && npm run inspect",
     "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
     "test": "jest --coverage --runInBand",
-    "version": "conventional-changelog -i CHANGELOG.md -s && git add CHANGELOG.md"
+    "version": "conventional-changelog -i CHANGELOG.md -s && git add CHANGELOG.md",
+    "build": "webpack --config ./webpack.config.js",
+    "start": "webpack-dev-server --open --config ./webpack.config.dev.js",
+    "watch": "webpack -w --progress"
   },
   "license": "ISC",
   "repository": "https://github.com/readmeio/syntax-highlighter",
@@ -26,16 +29,22 @@
     "@commitlint/config-conventional": "^9.1.2",
     "@readme/eslint-config": "^3.2.0",
     "babel-jest": "^26.3.0",
+    "babel-loader": "^8.1.0",
     "babel-polyfill": "^6.26.0",
     "conventional-changelog-cli": "^2.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
     "eslint": "^7.0.0",
     "glob": "^7.1.6",
+    "html-webpack-plugin": "^4.4.1",
     "husky": "^4.2.5",
     "jest": "^26.0.1",
     "jsinspect": "^0.12.6",
-    "prettier": "^2.0.1"
+    "prettier": "^2.0.1",
+    "terser-webpack-plugin": "^4.1.0",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "prettier": "@readme/eslint-config/prettier",
   "husky": {
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,6 @@
+<head>
+   <meta charset="UTF-8">
+   <title>Syntax Highlighter</title>
+   <link rel="icon" type="image/png" href="./favicon.ico"/>
+</head>
+<div id="root" />
diff --git a/public/index.js b/public/index.js
@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom';
+import syntaxHighlighter from '../src/index';
+
+ReactDOM.render(
+  syntaxHighlighter('console.log("Hello, world!");', 'js', { dark: true }),
+  document.getElementById('root')
+);
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -0,0 +1,40 @@
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: ['./public/index.js'],
+  module: {
+    rules: [
+      {
+        test: /\.js(x?)$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            extends: './.babelrc',
+          },
+        },
+      },
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    publicPath: '/',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: path.resolve(__dirname, 'public/index.html'),
+      filename: 'index.html',
+    }),
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 3400,
+    hot: true,
+    watchContentBase: true,
+  },
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,31 @@
+const TerserPlugin = require('terser-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: ['./src/index.js'],
+  module: {
+    rules: [
+      {
+        test: /\.js(x?)$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            extends: './.babelrc',
+          },
+        },
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
	`1`	`+dist/`
`1`	`2`	`node_modules/`
`2`	`3`	`coverage/`