Here’s my webpack.config.js for an elm/elixir project. I kept it pretty simple. I’m also getting a size warning with this, but it seems to test the size, before it get’s optimized.
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const elmSource = path.join(__dirname, '/elm')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = (env, argv) => ({
stats: {
colors: true
},
entry: ['./js/app.js'],
output: {
filename: 'app.js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
noParse: [/\.elm$/],
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: [
{
loader: 'elm-webpack-loader',
options: {
verbose: argv.mode === 'production' ? false : true,
debug: argv.mode === 'production' ? false : true,
optimize: argv.mode === 'production' ? true : false,
cwd: elmSource
}
}
]
}
]
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: false,
terserOptions: {
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: 2,
},
mangle: true,
}
}),
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
new MiniCssExtractPlugin({ filename: '../css/app.css' })
],
resolve: {
extensions: ['.js', '.elm'],
modules: ['node_modules']
}
});