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

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
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
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
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
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
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36432 110
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement