Update webpack config for ExAdmin .js and .css files

phoenix
webpack
#1

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
#2

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
#3

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

1 Like