WestKeys
Is there a way to reduce mix phx.server output?
Every time I run mix phx.server, I get:
[info] Running HelloWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access HelloWeb.Endpoint at http://localhost:4000
webpack is watching the files…
[hardsource:86c17673] Using 1 MB of disk space.
[hardsource:86c17673] Tracking node dependencies with: package-lock.json.
[hardsource:86c17673] Reading from cache 86c17673...
Hash: 97fd47bb7gfde75674c1
Version: webpack 4.41.5
Time: 174ms
Built at: 2021-02-05 2:42:46 p.m.
Asset Size Chunks Chunk Names
../css/app.css 10.7 KiB app [emitted] app
../favicon.ico 1.23 KiB [emitted]
../images/phoenix.png 13.6 KiB [emitted]
../robots.txt 202 bytes [emitted]
app.js 13.5 KiB app [emitted] app
Entrypoint app = ../css/app.css app.js
[0] multi ./js/app.js 28 bytes {app} [built]
+ 5 hidden modules
Any way to control the output of this command?
Like in the docs:
$ mix phx.server
[info] Running HelloWeb.Endpoint with cowboy 2.5.0 at http://localhost:4000
Webpack is watching the files…
...
Marked As Solved
WestKeys
Silly me imagined for some reason Phoenix had some flags for this.
Updated my webpack.config.js and now works as expected:
-
added
stats: 'minimal',(which “Only output when errors or new compilation happen”) tomodule.exportsreturn object -
configured
HardSourceWebpackPlugininfotolevel: 'warn'(which “reports warn and error level messages”)".
Final result
❯ mix phx.server
[info] Running HelloWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access HelloWeb.Endpoint at http://localhost:4000
webpack is watching the files…
webpack.config.js
❯ cat assets/webpack.config.js
const path = require('path');
const glob = require('glob');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => {
const devMode = options.mode !== 'production';
return {
stats: 'minimal', #<-------Add kv------->
optimization: {
minimizer: [
new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js'),
publicPath: '/js/'
},
devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.[s]?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
.concat(devMode ? [new HardSourceWebpackPlugin({
#<-------Add obj------->
info: {
level: 'warn'
}
})] : [])
}
};
Also Liked
derek-zhou
It is very simple. Just install snowpack using the npm, than make a small snowpack.config.js:
module.exports = {
mount: {
"static": {url: "/", static: true, resolve: false},
"css": "/css",
"js": "/js"
},
plugins: [
"@snowpack/plugin-postcss"
],
buildOptions: {
out: "../priv/static"
},
};
then hook up snowpack into the flow. My way is chaning the package.json to:
...
"scripts": {
"deploy": "snowpack build",
"watch": "snowpack build --watch"
},
...
then in your dev.exs:
...
watchers: [
npm: [
"run",
"watch",
cd: Path.expand("../assets", __DIR__)
]
...
In your template, make sure your js file is included with type=“module”, such as:
<script defer type="module" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
The thing I like the most about snowpack is it does not bundle. All js files are loose, so it is much more easier to debug in the browser dev tool.
dimitarvp
JS fatigue is very real for everyone who’s not a JS dev – but has to deal with the frontend somewhat.
I’m glad that the JS community is working on improving the ecosystem but their expectations that everybody else should just keep up with what’s used nowadays is unrealistic.
To make things worse, they don’t give a single thought to backwards compatibility and transferable knowledge.
hauleth
Which part you want to get rid of? Elixir logging can be controlled via setting appropriate level and for Webpack messages you need to check Webpack documentation.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









