radosch
How to plug in webpack 2.0 into phoenix 1.3.0-rc
Hi Everyone,
I want to replace brunch with webpack. Does anyone has a clue how to call the watcher now in the sub directory?
The package.json is in the subdirectory only this makes a lot of problems which I don’t know how to solve.
May be someone else is interested in this, I posted it already on stackoverflow, and I would gratefully move a good solution so that all can benefit from such a thing ![]()
Thanks a lot!
Marked As Solved
Letmecode
I’ve have a starter Phoenix repo implementing Webpack, React (with Hot Module Replacement) and Stylus. I’ve updated it to use Phoenix 1.3 and Webpack 2, yesterday.
Improvements and pull requests are of course welcome: https://github.com/odiumediae/webpacker
Also Liked
LawJolla
In addition to @idi527 , here’s my Webpack 2 config (but using Phoenix ~1.2). In 2017, hot module reload is required. I don’t know how people develop without it.
Hopefully it helps someone.
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require('webpack');
const path = require('path');
const publicPath = 'http://localhost:4001/';
const config = {
entry: [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?' + publicPath,
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
"./web/static/js/app.js"
],
output: {
path: path.resolve(__dirname) + "/priv/static/js",
publicPath: publicPath,
filename: "bundle.js"
},
devServer: {
hot: true,
port: 4001,
// enable HMR on the server
contentBase: path.resolve(__dirname) + "/priv/static/js",
// match the output path
publicPath: publicPath,
// match the output `publicPath`
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
resolve: {
modules: [ "node_modules", path.resolve(__dirname) + "/web/static/js" ]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
new CopyWebpackPlugin([{ from: "./web/static/assets" }])
]
};
module.exports = config;
OvermindDL1
Most of those you do not need javascript for. I have models, accordions, text input labels transformations all without javascript. I’ve noticed a lot of people use javascript for things that are pretty trivial in CSS, maybe they like the extra slowdown on their pages or something… >.>
yordisprieto
Hey, I created this repo GitHub - straw-hat-labs/phoenix_assets_webpack: Asset Pipeline with Webpack on Phoenix · GitHub
Normally I understand how Webpack works and I replace it every time I create a Phoenix project
and this is phoenix 1.3 ready actually
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









