How to plug in webpack 2.0 into phoenix 1.3.0-rc

Phoenix Forum Questions / Help
,
1

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!

3 Likes
2

In config/dev.exs i’ve replaced

watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
                  cd: Path.expand("../assets", __DIR__)]]

with

watchers: [npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]]

and in assets/package.json i’ve replaced

"scripts": {
  "deploy": "brunch build --production",
  "watch": "brunch watch --stdin"
}

with

"scripts": {
  "deploy": "node_modules/.bin/webpack -p",
  "watch": "node_modules/.bin/webpack --watch --colors"
}

and it seems to be working.

4 Likes
3

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;
8 Likes
4

If you’re not developing a stateful js webapp you don’t really need that.

1 Like
5

I’d be interested to see a 2017 web app that doesn’t use a piece of UI state. A modal. Accordion box open. Text input focused. Etc.

2 Likes
6

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… >.>

6 Likes
7

If you enjoy page refreshes and resetting the UI state to iterate your designs (no HMR), have at it. It has nothing to do with CSS vs Javascript implementation.

I was trying to help. Sorry to ruffle feathers.

1 Like
8

Unsure about webpacks refreshing, but brunch + phoenix can reload just parts as well, including css.

What I do know is when I tried webpack once rebuilds were slow, like on the order of a minute for every-change-made, which is quite painful… >.<

3 Likes
9

I made a screencast to show the functionality to which I’m referring. This was done on my slow MacBook (and the screencast recording made the rebuilds much slower).

When I looked at Brunch, it could not do hot module replacement. Maybe I missed it. If it can do the functionality of Webpack HMR that’s in the screencast, please let me know.

1 Like
10

https://www.npmjs.com/package/hmr-brunch :slight_smile:

Everything in Brunch is a plugin, and that is an old one. :slight_smile:

1 Like
11

I had no idea! Thank you for the education… I’ll check it out on the next project.

1 Like
12

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

10 Likes
13

Just great! Thanks a log @Letmecode. I managed to fix finally my installation, thank you very much!

What a nice setup :slight_smile:

I’d like to step further with this one :wink:

3 Likes
14

I’m glad I could help.

That other setup looks great, and GraphQL is particularly nice, but it hasn’t been updated for a while, as it seems, and Webpack is still version 1, so it’s not for me, but it shouldn’t be too hard to update.

1 Like
15

Hey, I created this repo https://github.com/yordis/phoenix_assets_webpack

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

6 Likes
16

I would love to use if the setup was not using React/Stylus but VueJS 2.

17

Webpack 3 was just released. It was my introduction to Webpack, but all that needs to change on the Phoenix side is @idi527’s post. The docs on Webpack are pretty good. I don’t run any client-side JS framework. I just wanted the features Webpack provides – tree-shaking, hot module replacement, and better maintained plugins than those built for Brunch. I read and followed the guides here: https://webpack.js.org/

18

This is using laravel-mix, which includes support for .vue files.

19

By far the biggest issue witih Brunch at the moment is that it isn’t really being maintained. The latest updates to the primary Brunch repo were committed seven-ish months ago, while webpack is updated daily.

The maintenance schedule itself isn’t such a problem, except that most of the plugins, also, don’t seem to enjoy any kind of maintenance either. I’ve had to personally go in and update four or five different brunch packages to reflect modern package versions, some which required complete dependency swap-outs, just to use them with other current packages in my npm package build.

Brunch seems like a great tool on the surface, but I’d love not to have to become its maintainer in order to rely on it. Webpack has a much, much more active community around it, and as such should probably be a candidate for being integrated by default in Phoenix 1.4+.

3 Likes
20

I do love Brunch’s speed, but that’s probabky the only thing I like about it. The docs are extrememely sparse and the plugins often fail subtly. But maybe for something like Phoenix it’s good enough for a default. Swapping it is pretty easy too :slight_smile:

2 Likes