I am using Webpack with Elixir/Phoenix. I recently upgraded to Webpack 5 from Webpack 4.
I think everything is working fine except that now for some reason a dist and main.js are always created at the project root dist/main.js when I run my tests. This file is mostly empty:
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/
/******/
/******/ })()
;
In my mix.exs I have the following. This is the line of code that creates the dist/main.js
defp compile_assets(_) do
Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development",
quiet: false
)
end
My webpack.config includes:
devtool: 'eval-source-map',
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
'marketing': glob.sync('./vendor/**/*.js').concat(['./js/marketing.js']),
'admin': glob.sync('./vendor/**/*.js').concat(['./js/admin.js']),
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js')
},
When I run this in IEx I get:
iex(1)> Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development", quiet: false)
asset main.js 662 bytes [emitted] (name: main)
ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/me/development/apps/my_app'
resolve './src' in '/Users/me/development/apps/my_app'
No description file found in /Users/me/development/apps/my_app or above
No description file found in /Users/me/development/apps/my_app or above
no extension
/Users/me/development/apps/my_app/src doesn't exist
.js
/Users/me/development/apps/my_app/src.js doesn't exist
.json
/Users/me/development/apps/my_app/src.json doesn't exist
.wasm
/Users/me/development/apps/my_app/src.wasm doesn't exist
as directory
/Users/me/development/apps/my_app/src doesn't exist
webpack 5.50.0 compiled with 1 error in 50 ms
1
Since I have specified the entry I would assume it should be fine. Any help would be greatly appreciated.
Update: Showing entire webpack.config.js
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack');
module.exports = (webpackEnv, webpackOptions) => {
const platform = process.env.PLATFORM
if (platform == undefined) {
throw "process.env.PLATFORM is undefined!"
}
dotEnvFile = `.env.${platform}`
const mode = platform === 'production' ? 'production' : 'development';
const minimize = platform === 'production' ? true : false;
const cache = platform === 'production' ? false : { type: 'filesystem' };
const vueProdDevtools = platform === 'production' ? false : true;
return {
cache: cache,
mode: mode,
optimization: {
minimize: minimize,
minimizer: [
new TerserPlugin({
parallel: true
}),
new CssMinimizerPlugin()
]
},
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
'marketing': glob.sync('./vendor/**/*.js').concat(['./js/marketing.js']),
'admin': glob.sync('./vendor/**/*.js').concat(['./js/admin.js']),
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js')
},
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
}
]
}, {
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new Dotenv({
path: path.resolve(__dirname, '..', dotEnvFile)
}),
new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
new CopyWebpackPlugin({patterns:[{ from: 'static/', to: '../' }]}),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
__VUE_PROD_DEVTOOLS__: vueProdDevtools
})
],
resolve: {
alias: {
vue: '@vue/compat'
},
extensions: [ '*', '.js', '.vue', '.json' ],
},
}
};
Update 2:
Per the suggestion to turn filename into a function I updated it to:
output: {
filename: (pathData, assetInfo) => {
console.log("******** pathData:", pathData)
console.log("******** assetInfo:", assetInfo)
return '[name].js'
},
path: path.resolve(__dirname, '../priv/static/js')
}
The interesting bit is when I run
mix phx.server
The outputs are:
******** pathData: {
hash: '449eeaf77670741a6887',
runtime: 'app',
chunk: Chunk {
id: 'app',
ids: [ 'app' ],
debugId: 1000,
name: 'app',
idNameHints: SortableSet [Set] {
_sortFn: undefined,
_lastActiveSortFn: Symbol(not sorted),
_cache: undefined,
_cacheOrderIndependent: undefined
},
preventIntegration: false,
filenameTemplate: undefined,
_groups: SortableSet [Set] {
[Entrypoint],
_sortFn: [Function: compareChunkGroupsByIndex],
_lastActiveSortFn: Symbol(not sorted),
_cache: undefined,
_cacheOrderIndependent: undefined
},
runtime: 'app',
files: SetDeprecatedArray [Set] { '../css/app.css' },
auxiliaryFiles: Set {},
rendered: false,
hash: '09da590258e85092531ee1a26f184db4',
contentHash: [Object: null prototype] {
'css/mini-extract': '4500f8bd1df6d9d548c3',
javascript: 'a1a060a5ddfcebc58653'
},
renderedHash: '09da590258e85092531e',
chunkReason: undefined,
extraAsync: false
},
contentHashType: 'javascript'
}
******** assetInfo: {}
******** pathData: {
hash: '449eeaf77670741a6887',
runtime: 'marketing',
chunk: Chunk {
id: 'marketing',
ids: [ 'marketing' ],
debugId: 1001,
name: 'marketing',
idNameHints: SortableSet [Set] {
_sortFn: undefined,
_lastActiveSortFn: Symbol(not sorted),
_cache: undefined,
_cacheOrderIndependent: undefined
},
preventIntegration: false,
filenameTemplate: undefined,
_groups: SortableSet [Set] {
[Entrypoint],
_sortFn: [Function: compareChunkGroupsByIndex],
_lastActiveSortFn: Symbol(not sorted),
_cache: undefined,
_cacheOrderIndependent: undefined
},
runtime: 'marketing',
files: SetDeprecatedArray [Set] { '../css/marketing.css' },
auxiliaryFiles: Set {},
rendered: false,
hash: 'e11f89b04d9e2d62877069c780bfd99c',
contentHash: [Object: null prototype] {
'css/mini-extract': '1218451d2cf9d01e4c35',
javascript: '0bf8255fc0482a761bba'
},
renderedHash: 'e11f89b04d9e2d628770',
chunkReason: undefined,
extraAsync: false
},
contentHashType: 'javascript'
}
******** assetInfo: {}
******** pathData: {
hash: '449eeaf77670741a6887',
runtime: 'admin',
chunk: Chunk {
id: 'admin',
ids: [ 'admin' ],
debugId: 1002,
name: 'admin',
idNameHints: SortableSet [Set] {
_sortFn: undefined,
_lastActiveSortFn: Symbol(not sorted),
_cache: undefined,
_cacheOrderIndependent: undefined
},
preventIntegration: false,
filenameTemplate: undefined,
_groups: SortableSet [Set] {
[Entrypoint],
_sortFn: [Function: compareChunkGroupsByIndex],
_lastActiveSortFn: Symbol(not sorted),
_cache: undefined,
_cacheOrderIndependent: undefined
},
runtime: 'admin',
files: SetDeprecatedArray [Set] { '../css/admin.css' },
auxiliaryFiles: Set {},
rendered: false,
hash: '6a55d7e6d1cc37be6087e1c464285cc2',
contentHash: [Object: null prototype] {
'css/mini-extract': '613df220ea4099b5fbf5',
javascript: '90a7803cefe86244fd07'
},
renderedHash: '6a55d7e6d1cc37be6087',
chunkReason: undefined,
extraAsync: false
},
contentHashType: 'javascript'
}
******** assetInfo: {}
So, I see that it run one time for each entry point (makes sense). However, when in IEx and I do:
Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development", quiet: false)
asset main.js 662 bytes [compared for emit] (name: main)
ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/me/development/apps/my_app'
resolve './src' in '/Users/me/development/apps/my_app'
No description file found in /Users/me/development/apps/my_app or above
No description file found in /Users/me/development/apps/my_app or above
no extension
/Users/me/development/apps/my_app/src doesn't exist
.js
/Users/me/development/apps/my_app/src.js doesn't exist
.json
/Users/me/development/apps/my_app/src.json doesn't exist
.wasm
/Users/me/development/apps/my_app/src.wasm doesn't exist
as directory
/Users/me/development/apps/my_app/src doesn't exist
webpack 5.51.1 compiled with 1 error in 47 ms
1
So the console.log command isn't printing in IEx. Could that be related? Could be be that the command the test code is running, the one in IEx, is running a "different" webpack command? Is it perhaps not finding the webpack.config?
The reason dist/main.js is created is because when webpack is run it is unable to find a webpack.config.js and so dist/main.js is a default behavior.
I discovered this when I updated the filename to be a function. In it I then called console.log("test") and expected to see it in IEx. The console log never printed out.
I then ran the regular mix phx.server and I did get the new output.
In dev.exs there's:
watchers: [
node: [
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--progress",
"--watch",
"--watch-options-stdin",
cd: Path.expand("../assets", __DIR__)
]
]
This all looks as expected but with a different implementation. (It is using cd: Path.expand but I'm only noticing this now.)
So, why is one not working while the other is fine?
When taking a closer look at
defp compile_assets(_) do
Mix.shell().cmd("./assets/node_modules/webpack/bin/webpack.js --mode development",
quiet: false
)
end
I decided to see where I got this from (which was from the Wallaby documentation)
I went back to the documentation and noticed it had changed.
Here is the change: https://github.com/elixir-wallaby/wallaby/commit/834bdb726228349f800837e470a0c77cd2f4a6bd
Now the code should be:
defp compile_assets(_) do
Mix.shell().cmd("cd assets && ./node_modules/.bin/webpack --mode development",
quiet: true
)
I don't know why we'd need to cd into assets vs what we had before, but now it works.