Switch from Laravel Mix to Webpack Encore

- Updated npm dependencies
- Replaced `webpack.mix.js` with `webpack.config.js`
- Added `postcss.config.js`
- Removed the `src` directory and moved `css` and `js` to the root level
  of the theme
- Renamed `dist` to `build` and updated in libraries file

References #41

web/themes/custom/opdavies/.gitignore

@@ -1,6 +1,5 @@
 /*.log
-/mix-manifest.json
 /node_modules/
 
 # Ignore compiled assets.
-# /dist/
+/build/

web/themes/custom/opdavies/js/app.js

@@ -1,3 +1,4 @@
+import '../css/tailwind.pcss'
 import 'alpinejs'
 import hljs from 'highlightjs'
 

web/themes/custom/opdavies/opdavies.libraries.yml

@@ -1,11 +1,11 @@
 global-styling:
   css:
     base:
-      dist/tailwind.css: {}
+      build/app.css: {}
 
 global-scripts:
   js:
-    dist/js/app.js: {}
+    build/app.js: {}
 
 twitter:
   js:

web/themes/custom/opdavies/package.json

@@ -1,23 +1,18 @@
 {
   "private": true,
   "scripts": {
-    "build": "npm run dev",
+    "dev": "encore dev",
-    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "NODE_ENV=production encore production",
-    "development": "npm run dev",
+    "watch": "encore dev --watch"
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
-    "autoprefixer": "^9.7.6",
+    "@symfony/webpack-encore": "^0.30.2",
-    "cross-env": "^5.2.0",
+    "alpinejs": "^2.3.5",
+    "autoprefixer": "^9.8.0",
     "highlightjs": "^9.16.2",
-    "laravel-mix": "^2.1.14",
     "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.1",
-    "tailwindcss": "^1.0.1"
+    "tailwindcss": "^1.4.6"
-  },
-  "dependencies": {
-    "alpinejs": "^2.3.5"
   }
 }

web/themes/custom/opdavies/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('postcss-nested'),
+    require('autoprefixer')
+  ]
+}

web/themes/custom/opdavies/webpack.config.js

@@ -0,0 +1,17 @@
+let Encore = require('@symfony/webpack-encore')
+
+Encore
+    .disableSingleRuntimeChunk()
+    .cleanupOutputBeforeBuild()
+    .setOutputPath('build/')
+    .setPublicPath('/themes/custom/opdavies/build')
+
+    .addEntry('app', './js/app.js')
+
+    .enablePostCssLoader()
+
+if (!Encore.isProduction()) {
+    Encore.enableSourceMaps()
+}
+
+module.exports = Encore.getWebpackConfig()

web/themes/custom/opdavies/webpack.mix.js

@@ -1,10 +0,0 @@
-let mix = require('laravel-mix');
-
-mix.postCss('src/tailwind.pcss', 'dist', [
-  require('postcss-import'),
-  require('tailwindcss'),
-  require('postcss-nested'),
-  require('autoprefixer')
-])
-
-mix.js('src/app.js', 'dist/js')