Skip to content

Instantly share code, notes, and snippets.

@niallobrien niallobrien/webpack.mix.js
Last active Feb 26, 2018

Embed
What would you like to do?
Laravel Mix +TailwindCSS + PurgeCSS Asset Pipeline Config for AdonisJS
var mix = require('laravel-mix');
var glob = require("glob-all");
var PurgecssPlugin = require("purgecss-webpack-plugin");
isProduction = (process.env.NODE_ENV === 'production' || process.argv.includes('-p'));
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g);
}
}
mix
.options({ processCssUrls: false, publicPath: 'public' })
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery', 'jquery']
})
.js('resources/assets/scripts/app.js', 'public/assets/scripts')
.extract(['jquery'], 'public/assets/scripts/vendor.js')
.postCss('resources/assets/styles/app.css', 'public/assets/styles', [
require('postcss-import')(),
require('tailwindcss')('./tailwind.js'),
require('postcss-cssnext')({
features: {
autoprefixer: false
},
})
])
.webpackConfig({
plugins: [
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, 'resources', 'views', '/**/*.edge'), // pretty much the same as Laravel blade templates
path.join(__dirname, 'resources', 'assets', 'scripts', '/**/*.js')
]),
extractors: [
{
extractor: TailwindExtractor,
extensions: ["html", "js", "edge"]
}
]
})
]
})
if (isProduction) mix.version()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.