Update webpack config for ExAdmin .js and .css files

I’m trying to finalize the update of my older Phoenix app (ex338) to the Phoenix 1.4 conventions. The app still uses ExAdmin. I’m having a hard time figuring out how to transfer the brunch config to webpack. Here was my brunch-config.js:

const neat = require('bourbon-neat').includePaths;
const bourbon = require('bourbon').includePaths;

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: {
        'js/app.js': /^(js)|(node_modules)/,
        'js/ex_admin_common.js': ['vendor/ex_admin_common.js'],
        'js/admin_lte2.js': ['vendor/admin_lte2.js'],
        'js/jquery.min.js': ['vendor/jquery.min.js']
      }
    },
    stylesheets: {
      joinTo: {
        'css/app.css': /^(css)/,
        'css/admin_lte2.css': ['vendor/admin_lte2.css'],
        'css/active_admin.css': ['vendor/active_admin.css.css']
      },
      order: {
        after: ['css/app.css'] // concat app.css last
      }
    },
    templates: {
      joinTo: 'js/app.js'
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to '/assets/static'. Files in this directory
    // will be copied to `paths.public`, which is 'priv/static' by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ['static', 'css', 'js', 'vendor'],
    // Where to compile files to
    public: '../priv/static'
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      options: {
        includePaths: bourbon.concat(neat) 
      }
    }
  },

  modules: {
    autoRequire: {
      'js/app.js': ['js/app']
    }
  },

  npm: {
    enabled: true
  }
};

Here is my new webpack.config.js file:

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const neat = require("bourbon-neat").includePaths;
const bourbon = require("bourbon").includePaths;
const bourbonNeatPaths = bourbon.concat(neat);

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    "./js/app.js": ["./js/app.js"].concat(glob.sync("./vendor/**/*.js"))
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "../priv/static/js")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: bourbonNeatPaths
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "../css/app.css" }),
    new CopyWebpackPlugin([{ from: "static/", to: "../" }])
  ]
});

When I deploy it, the ExAdmin pages are plain html and I get errors in my javascript console that my ExAdmin .css and .js assets can’t be found Failed to load resource: the server responded with a status of 404 (Not Found). I tried adding those files into the entry object, but that didn’t fix the problem.

Does anyone have an idea for how to update my webpack.config.js? Thanks!

1 Like

Hi there,

I have been having the same issue, and just solved it.

Here’s how:

// webpack.config.js
    new CopyWebpackPlugin([
      { from: 'vendor/ex_admin', to: '../' },
      { from: 'static/', to: '../' },
    ])

and in /assets/vendor, I created /ex_admin/js and /ex_admin/css and put the static files from there https://github.com/smpallen99/ex_admin/tree/master/priv/static/js and there https://github.com/smpallen99/ex_admin/tree/master/priv/static/css respectively.

This is because the ex_admin templates looks for /js/ex_admin_common.js etc. so we need to move the files to the same structure.

Hope you will make it! Good luck

3 Likes

Good to go!! Thank you! If anyone is interested, here is the pull request.

2 Likes