Skip to content

Instantly share code, notes, and snippets.

@channainfo
Created April 30, 2019 11:20
Show Gist options
  • Save channainfo/8ec80e905a09c6310968facd538ff740 to your computer and use it in GitHub Desktop.
Save channainfo/8ec80e905a09c6310968facd538ff740 to your computer and use it in GitHub Desktop.
Multiple js and css file with web pack in Phoenix 1.4
// regenerate wit mix phx.server
// target location priv/statics/(js|css)
// sometime does not work well I think because of caching
// might need to play around with key names in the entry objects to see if it takes affect.
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => ({
optimization: {
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
app: ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
manage: ['./js/manage.js'].concat(glob.sync('./vendor/**/*.js')),
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
// test: /\.css$/,
// use: [MiniCssExtractPlugin.loader, 'css-loader']
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {}
},
{
loader: 'sass-loader',
options: {}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new MiniCssExtractPlugin({ filename: '../css/manage.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment