Webpack 2.0+ with Phoenix 1.3+ (Elixir)

webpack.config.babel.js

import webpack from "webpack";
import ExtractTextPlugin from "extract-text-webpack-plugin";
import CopyWebpackPlugin from "copy-webpack-plugin";
import WebpackNotifierPlugin from "webpack-notifier";
import path from "path";

const ENV = process.env.NODE_ENV || "development";
const IS_PROD = ENV === "production";
const OUTPUT_PATH = path.resolve(__dirname, "..", "priv", "static");

const extractSass = new ExtractTextPlugin({
  filename: "css/app.css",
});

export default {
  entry: ["./css/app.scss", "./js/app.js"],
  output: {
    path: OUTPUT_PATH,
    filename: "./js/app.js",
    publicPath: "/",
  },

  resolve: {
    modules: ["node_modules", `${__dirname}/js`],
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        include: __dirname,
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              includePaths: [`${__dirname}/node_modules`],
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [
            {
              loader: "css-loader",
              options: {
                includePaths: [`${__dirname}/node_modules`],
                sourceMap: true,
              },
            },
            "resolve-url-loader",
            {
              loader: "sass-loader",
              options: {
                includePaths: [`${__dirname}/node_modules`],
                sourceMap: true,
              },
            },
          ],
          fallback: "style-loader",
        }),
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",         
          outputPath: "./fonts",
          publicPath: "../fonts/",
        },
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "./images",
          publicPath: "../images/",
        },
      },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: `${__dirname}/static`,
        to: OUTPUT_PATH,
        ignore: [".DS_Store"],
      },
    ]),
    new WebpackNotifierPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    extractSass,
  ],
};

Install all npm modules

yarn add -D webpack extract-text-webpack-plugin copy-webpack-plugin webpack-notifier style-loader css-loader [email protected] copy-webpack-plugin sass-loader css-loader resolve-url-loader babel-core babel-loader imports-loader babel-preset-react babel-preset-latest babel-preset-stage-0 node-sass jquery

package.json

  "scripts": {
    "deploy": "NODE_ENV=production webpack -p",
    "watch": "webpack --watch-stdin --color"
  }

dev.exs

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

.babelrc

{ "presets": ["latest", "react", "stage-0"] }