Webpack 2.0 for Phoenix (Elixir) working with sass (scss), Image files, CSS, Font Files and jQuery

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";

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

export default {
  entry: ["./web/static/css/app.scss", "./web/static/js/app.js"],
  output: {
    path: `${__dirname}/priv/static`,
    filename: "./js/app.js",
    publicPath: "/"
  },

  resolve: {
    modules: ["node_modules", `${__dirname}/web/static/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: "../static/fonts/",
          publicPath: "../fonts/"
        }
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "../static/images/",
          publicPath: "../images/"
        }
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: `${__dirname}/web/static/assets`,
        to: `${__dirname}/priv/static/`,
        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"] }