Replace Mix with Encore

.gitignore

@@ -1,6 +1,5 @@
 /bin/
-/mix-manifest.json
 /node_modules/
 /output_*/
-/source/dist/
+/source/build/
 /vendor/

assets/js/app.js

@@ -1,4 +1,5 @@
-import Vue from 'vue'
+import '../css/tailwind.css'
+import Vue from 'vue';
 
 window.hljs = require('highlightjs')
 

package.json

@@ -1,40 +1,28 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
+    "dev": "encore dev",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "encore dev --watch",
-    "lint": "eslint --ext .js,.vue resources/js/app.js",
+    "build": "encore production --progress"
-    "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",
-    "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"
-  },
-  "devDependencies": {
-    "browser-sync": "^2.26.3",
-    "browser-sync-webpack-plugin": "2.0.1",
-    "eslint": "^5.15.3",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-node": "^9.1.0",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^5.2.2",
-    "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
-    "cross-env": "^5.1.5",
+    "@symfony/webpack-encore": "^0.28.0",
-    "highlightjs": "^9.10.0",
+    "highlightjs": "^9.12.0",
-    "laravel-mix": "^4.1.2",
-    "laravel-mix-purgecss": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.1.2",
     "tailwindcss": "^1.1.2",
-    "tailwindcss-skip-link": "^1.0.0",
+    "tailwindcss-interaction-variants": "^2.2.0",
-    "tailwindcss-spaced-items": "https://github.com/n1kk/tailwindcss-spaced-items#master",
+    "tailwindcss-skip-link": "^1.0.1",
-    "tailwindcss-visuallyhidden": "^1.0.1",
+    "tailwindcss-spaced-items": "^0.1.0",
-    "tailwindcss-vuejs": "^1.0.0",
+    "tailwindcss-visuallyhidden": "^1.0.2",
-    "vue": "^2.5.17"
+    "tailwindcss-vuejs": "^1.1.2",
+    "vue": "^2.6.10"
   },
-  "engines": {
+  "devDependencies": {
-    "yarn": "YARN NO LONGER USED - use npm instead."
+    "glob-all": "^3.1.0",
+    "postcss-loader": "^3.0.0",
+    "purgecss-webpack-plugin": "^1.6.0",
+    "vue-loader": "^15.7.1",
+    "vue-template-compiler": "^2.6.10"
   }
 }

postcss.config.js

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

source/_layouts/app.html.twig

@@ -9,7 +9,7 @@
             <meta name="twitter:creator" content="@{{ site.twitter.user }}">
         {% endblock %}
 
-        <link rel="stylesheet" href="/dist/css/app.css">
+        <link rel="stylesheet" href="/build/app.css">
         {% block stylesheets %}{% endblock %}
 
         {% for size in site.apple_touch_icon_sizes %}
@@ -29,9 +29,7 @@
             <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics.id }}', 'auto'); ga('send', 'pageview');</script>
         {% endif %}
 
-        <script src="/dist/js/manifest.js"></script>
+        <script src="/build/app.js"></script>
-        <script src="/dist/js/vendor.js"></script>
-        <script src="/dist/js/app.js"></script>
         {% block scripts %}{% endblock %}
     </body>
 </html>

webpack.config.js

@@ -0,0 +1,25 @@
+const Encore = require('@symfony/webpack-encore')
+const glob = require('glob-all')
+const PurgecssPlugin = require('purgecss-webpack-plugin')
+
+Encore
+  .disableSingleRuntimeChunk()
+  .cleanupOutputBeforeBuild()
+  .setOutputPath('source/build/')
+  .setPublicPath('/build')
+  .addEntry('app', './assets/js/app.js')
+  .enablePostCssLoader()
+  .enableVueLoader()
+  .enableSourceMaps(!Encore.isProduction())
+
+if (Encore.isProduction()) {
+  Encore.addPlugin(new PurgecssPlugin({
+    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+    paths: () => glob.sync([
+      'assets/**/*.vue',
+      'source/**/*.{md,twig}'
+    ])
+  }))
+}
+
+module.exports = Encore.getWebpackConfig()

webpack.mix.js

@@ -1,27 +0,0 @@
-let mix = require('laravel-mix')
-
-require('laravel-mix-purgecss')
-
-mix.disableNotifications()
-  .postCss('resources/css/app.css', 'source/dist/css', [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('postcss-nested'),
-  ])
-  .js('resources/js/app.js', 'source/dist/js')
-  .extract()
-
-mix.browserSync({
-  proxy: 'localhost:8000',
-  files: [
-    'output_*/**/*'
-  ],
-  notify: false,
-  open: false
-})
-
-mix.purgeCss({
-  folders: ['resources', 'output_*'],
-  whitelistPatterns: [/language/, /hljs/],
-  whitelistPatternsChildren: [/^markdown$/]
-})