Middleman + Webpack 4

#1

I’ve scoured the internet in the search for a Webpack 4 config.js that works with Middleman but unfortunately haven’t found a solution. It seems everybody in the middleman community is happy to stay on Webpack 3, which hasn’t had a release in almost a year. The reason I’ve found is that the extract-text-webpack-plugin is no longer supported after Webpack 3, which is needed to export CSS into a file.

While I don’t need the latest and greatest, and Webpack 3 currently works for me, I’m interested to learn if anybody has middleman working with Webpack 4 and willing to share their webpack.config.js. I’m not really a full-on front-end developer and a designer/developer hybrid – I personally have not figured out the solution to this.

Thanks in advance.

#2

I ended up getting it to work using the repo from this post as a starting point. Literally the post right before mine.

Thanks for sharing

#3

Glad it helped! Perhaps I should pin it to the docs under something.

1 Like
#4

@chrisgriffin Would you mind sharing your configuration?

#5

Thanks for sharing that! I’ve been trying to get webpack 4 to work on-and-off for about 9 months, every tutorial I googled used webpack 3. The webpack 3 solution worked, so it was a “if it’s not broke, don’t fix it” situation. Nevertheless, Webpack 4 has been out for a year or so, it was about time.

1 Like
#6

I can share it but it’s not much different from what @richjdsmith has in his repo. I added/removed some things to fit my needs:

  • I changed the entry paths to point to the css/js in my file structure.
  • I removed PostCSS related loader/config files because I’m not using it at this time.
  • I added sass-resources-loader as the last CSS loader (after sass-loader).

I also had to install/update several packages, update my .babelrc file, and I think that’s it.

1 Like
#7

@chrisgriffin would you be willing to share a gist? I also don’t use postcss and would love to have this config but don’t feel confident turning your description into a webpack config file.

#8

Here’s a very basic webpack config to get you going:

const path = require('path');

module.exports = {
  entry: {
    main: './source/assets/javascripts/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};
#9

I created a Middleman + Webpack repository with Netlify CMS, Babel and PurgeCSS included: https://github.com/tomrutgers/middleman-webpack-netlify-cms

It turns out asset_hash is very slow for large files (like React and Netlify CMS), which made me drop it altogether and let Webpack take care of the hashing of assets. Adding them to a layout is not as straightforward as one might hope, but a little RegExing from the sitemap resources took care of it. I still need to figure out a way to add hashes to images to be able to cache them, Middlemans asset hash is a pain even when you ignore the large files.

If anyone has good ideas about improving this repo, I’m open for suggestions and PR’s.

1 Like