Packages

Replaces Phoenix framework assets directory with preconfigured frontend frameworks.

Current section

Files

Jump to
phoenix_frontend assets tailwind-vue webpack.config.js
Raw

assets/tailwind-vue/webpack.config.js

const glob = require('glob')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'./js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: [
'vue-style-loader',
{ loader: 'css-loader' },
],
js: [
'babel-loader',
]
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' },
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
]
}
],
},
plugins: [
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new VueLoaderPlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
}
})