radosch

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 :slight_smile:

Thanks a lot!

Marked As Solved

Letmecode

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

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

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

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 :smiley: and this is phoenix 1.3 ready actually

Where Next?

Popular in Questions Top

nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
tduccuong
Hi, is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
earth10
Hi, I’m just starting to build a side-project with Elixir and Phoenix and doing some basic test with Elixir alone. What strikes me is th...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New

We're in Beta

About us Mission Statement