Webpack Encore

mix-manifest.json

@@ -1,4 +0,0 @@
-{
-    "/source/build/app.js": "/source/build/app.js",
-    "/source/build/app.css": "/source/build/app.css"
-}

netlify.toml

@@ -1,9 +1,9 @@
 [build]
 command = """
 composer test && \
-  npm run lint --fix-dry-run && \
+  yarn lint --fix-dry-run && \
-  npm run production && \
+  yarn run production && \
-  composer production
+  composer run production
 """
 publish = "output_prod"
 environment = { PHP_VERSION = "7.2" }

package.json

@@ -1,18 +1,14 @@
 {
   "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 assets/js/app.js",
+    "production": "encore production --progress",
-    "watch": "npm run development -- --watch",
+    "lint": "eslint --ext .js,.vue assets/js/app.js"
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "dependencies": {
-    "cross-env": "^6.0.3",
+    "@symfony/webpack-encore": "^0.28.0",
     "highlightjs": "^9.16.2",
-    "laravel-mix": "^5.0.0",
-    "laravel-mix-purgecss": "^4.2.0",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "tailwindcss": "^1.1.3",
@@ -24,8 +20,6 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "browser-sync": "^2.26.7",
-    "browser-sync-webpack-plugin": "^2.0.1",
     "eslint": "^5.15.3",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.16.0",
@@ -36,7 +30,6 @@
     "glob-all": "^3.1.0",
     "postcss-loader": "^3.0.0",
     "purgecss-webpack-plugin": "^1.6.0",
-    "sugarss": "^2.0.0",
     "vue-loader": "^15.7.2",
     "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="/build/app.css">
+        <link rel="stylesheet" href="{{ asset('build/app.css') }}">
         {% block stylesheets %}{% endblock %}
 
         {% for size in site.apple_touch_icon_sizes %}
@@ -29,7 +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="/build/app.js"></script>
+        <script src="{{ asset('build/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('assets/css/tailwind.css', 'source/build/app.css', [
-    require('postcss-import'),
-    require('tailwindcss'),
-    require('postcss-nested'),
-    require('autoprefixer')
-  ])
-  .js('assets/js/app.js', 'source/build')
-
-mix.browserSync({
-  proxy: 'localhost:8000',
-  files: [
-    'output_*/**/*'
-  ],
-  notify: false
-})
-
-mix.purgeCss({
-  extensions: ['html', 'md', 'twig', 'vue'],
-  folders: ['assets/js', 'source'],
-  whitelistPatterns: [],
-  whitelistPatternsChildren: []
-})