Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update to webpack v5 #4054

Closed
wants to merge 1 commit into from
Closed

Update to webpack v5 #4054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 12 additions & 14 deletions installer/templates/phx_assets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,19 @@
"phoenix": "file:<%= @phoenix_webpack_path %>"<%= if @html do %>,
"phoenix_html": "file:<%= @phoenix_html_webpack_path %>"<% end %><%= if @live do %>,
"phoenix_live_view": "file:<%= @phoenix_live_view_webpack_path %>",
"topbar": "^0.1.4"<% end %>
"topbar": "^1.x"<% end %>
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"sass-loader": "^8.0.2",
"sass": "^1.27.0",
"hard-source-webpack-plugin": "^0.13.1",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"terser-webpack-plugin": "^2.3.2",
"webpack": "4.41.5",
"webpack-cli": "^3.3.2"
"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"babel-loader": "^8.x",
"copy-webpack-plugin": "^7.x",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^1.x",
"mini-css-extract-plugin": "^1.x",
"sass": "^1.x",
"sass-loader": "^10.x",
"webpack": "^5.x",
"webpack-cli": "^4.x"
}
}
31 changes: 16 additions & 15 deletions installer/templates/phx_assets/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,21 @@
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 CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
const devMode = options.mode !== 'production';

return {
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'),
filename: '[name].js',
publicPath: '/js/'
},
devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
module: {
rules: [
{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey so I did my own webpack upgrade and I think you'll need a few other rules to ensure the most compatibility:

        {
          test: /\.svg$/i,
          type: 'asset/inline'
        },
        {
          test: /\.(png|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
        },

This comes directly from the Webpack 5 tutorial to ensure fonts and images are loaded successfully as well

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also noticed once that this is needed if you want to process assets by webpack.
But then I didn't touch any of these anymore.
It was not clear for me which file types people really need to have in here.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense - i think it's pretty safe to say that in general css, js, images, and fonts are all fair game

Expand All @@ -45,9 +36,19 @@ module.exports = (env, options) => {
]
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
.concat(devMode ? [new HardSourceWebpackPlugin()] : [])
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin({
patterns: [
{ from: 'static/', to: '../' }
]
})
],
optimization: {
minimizer: [
'...',
cw789 marked this conversation as resolved.
Show resolved Hide resolved
new CssMinimizerPlugin()
]
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also think you will get compilation errors if you don't specify target: 'nodeX.Y', because the default option for target is web which will usually cause things like http and url to blow up upon upgrading. Since these assets are built in a node-like environment targeting Node over web will ensure Webpack successfully compiles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a thing I for myself would need to explore more in detail. I didn't get the consequences of this now.
For Phoenix deploys the target in my opinion should be web - not node.
But you might be right.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought the same too but when I deployed with web I was getting errors around url and http and you'd have to set resolutions that resolve to false for both. Since this is a node environment for how we build our assets if you change it to node everything will resolve and pass.

devtool: devMode ? 'source-map' : undefined
}
};
3 changes: 2 additions & 1 deletion installer/templates/phx_single/config/dev.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ config :<%= @app_name %>, <%= @endpoint_module %>,
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--watch-stdin",
"--watch",
"--watch-options-stdin",
cw789 marked this conversation as resolved.
Show resolved Hide resolved
cd: Path.expand("../assets", __DIR__)
]
]<% else %>[]<% end %>
Expand Down
3 changes: 2 additions & 1 deletion installer/templates/phx_umbrella/apps/app_name_web/config/dev.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ config :<%= @web_app_name %>, <%= @endpoint_module %>,
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--watch-stdin",
"--watch",
"--watch-options-stdin",
cd: Path.expand("../apps/<%= @web_app_name %>/assets", __DIR__)
]
]<% else %>[]<% end %>
Expand Down
4 changes: 2 additions & 2 deletions lib/phoenix/endpoint.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,14 +149,14 @@ defmodule Phoenix.Endpoint do
You can configure it to whatever build tool or command you want:

[node: ["node_modules/webpack/bin/webpack.js", "--mode", "development",
"--watch-stdin"]]
"--watch", "--watch-options-stdin"]]

The `:cd` option can be used on a watcher to override the folder from
which the watcher will run. By default this will be the project's root:
`File.cwd!()`

[node: ["node_modules/webpack/bin/webpack.js", "--mode", "development",
"--watch-stdin", cd: "my_frontend"]]
"--watch", "--watch-options-stdin", cd: "my_frontend"]]

* `:live_reload` - configuration for the live reload option.
Configuration requires a `:patterns` option which should be a list of
Expand Down