I am not familiar with gist, but here is the webpack file and a simplification of the directory structure.
Webpack file:
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 ClosurePlugin = require('closure-webpack-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const merge = require("webpack-merge");
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HTMLWebpackPlugin = require("html-webpack-plugin");
require('dotenv').config()
var MODE = process.env.NODE_ENV === "prod" ? "production" : "development";
console.log(
"\x1b[36m%s\x1b[0m",
`** elm-webpack-starter: mode "${MODE}"\n`
);
var common = {
mode: MODE,
entry: {
app: "./js/app.js",
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, '../priv/static/')
},
plugins: [
new HTMLWebpackPlugin({
// Use this template to get basic responsive meta tags
template: "./index.html",
// inject details of output file at end of body
inject: "body"
}),
new MiniCssExtractPlugin({
filename: 'css/app.css',
}),
new BundleAnalyzerPlugin(),
new CleanWebpackPlugin({
dry: true,
}),
],
/*resolve: {
modules: [path.join(__dirname, "src"), "node_modules"],
extensions: [".js", ".elm", ".less", ".css", ".png"]
},*/
module: {
rules: [
{
test: /\.(ttf|eot|svg|png|jpg|gif|ico|woff|woff2)$/,
use: ['url-loader']
},
{
test: /\.js$/,
exclude: [/node_modules/, /elm/, /elm-stuff/],
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader', options: { minimize: true } }
]
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'less-loader'
]
}
]
},
watch: true,
node: {
__dirname: false
},
devtool: "source-map"
};
if (MODE === "development") {
module.exports = merge(common, {
optimization: {
minimize: true,
minimizer: [
new UglifyJsPlugin({
cache: true, parallel: true, sourceMap: false,
uglifyOptions: {
compress: {
pure_funcs: ['F2','F3','F4','F5','F6','F7','F8','F9','A2','A3','A4','A5','A6','A7','A8','A9'],
pure_getters: true,
keep_fargs: false,
unsafe_comps: true,
unsafe: true,
passes: 3
}
} }),
/* new ClosurePlugin(
{ mode: "STANDARD" },
{
// compiler flags here
//
// for debugging help, try these:
//
formatting: 'PRETTY_PRINT',
//debug: true
// renaming: false
}
),*/
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
// Suggested for hot-loading
new webpack.NamedModulesPlugin(),
// Prevents compilation errors causing the hot loader to lose state
new webpack.NoEmitOnErrorsPlugin()
],
module: {
rules: [
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: [
{ loader: "elm-hot-webpack-loader" },
{
loader: "elm-webpack-loader",
options: {
// add Elm's debug overlay to output
debug: true,
//
forceWatch: true,
cwd: path.resolve(__dirname, 'elm'),
//optimize: true
}
}
]
}
]
},
devServer: {
inline: true,
stats: { colors: true },
}
});
}
if (MODE === "production") {
module.exports = merge(common, {
optimization: {
minimize: true,
minimizer: [
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
/*new ClosurePlugin(
{ mode: "STANDARD" },
{
// compiler flags here
//
// for debugging help, try these:
//
// formatting: 'PRETTY_PRINT',
// debug: true
// renaming: false
}
),*/
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
// Delete everything from output-path (priv/static) and report to user
new CleanWebpackPlugin({
root: __dirname,
exclude: [],
verbose: true,
dry: false
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name]-[hash].css"
})
],
module: {
rules: [
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: {
loader: "elm-webpack-loader",
options: {
optimize: true,
cwd: path.resolve(__dirname, 'elm')
}
}
}
]
}
});
}
Directory structure:
βββ assets
β βββ css
β β βββ alert.less
β β βββ app.less
β β βββ chart.less
β β βββ form.less
β β βββ globals.less
β β βββ modal.less
β β βββ responsive.less
β β βββ table.less
β βββ cypress.json
β βββ elm
β β βββ date-picker
β β βββ elm-form
β β βββ elm.js
β β βββ elm.json
β β βββ elm-stuff
β β βββ optimize.sh
β β βββ src
β β βββ tests
β βββ elm-constants.json
β βββ elm.min.js
β βββ images
β β βββ loading.svg
β βββ index.html
β βββ js
β β βββ app.js
β β βββ socket.js
β βββ package.json
β βββ package-lock.json
β βββ semantic
β β βββ dist
β β βββ fonts
β β βββ gulpfile.js
β β βββ src
β β βββ tasks
β βββ semantic.json
β βββ webpack.config.js
βββ _build
βββ config # Phoenix
βββ lib # with Elixir code
βββ mix.exs
βββ mix.lock
βββ priv
β βββ repo
β β βββ migrations
β β βββ seeds.exs
β βββ static
β βββ app-ca86cff7da3d6ea30457.css
β βββ css
β βββ index.html
β βββ js
βββ rel
βββ test