Migration from Sprockets to Webpack

README.md

Directory structure

Before

.
|-- app/
|   `-- assets/
|       |-- fonts/
|       |-- images/
|       |-- javascripts/
|       `-- stylesheets/
`-- public/
    `-- assets/

After

.
|-- client/
|   |-- fonts/
|   |-- images/
|   |-- javascripts/
|   |-- stylesheets/
|   |-- package-lock.json
|   |-- package.json
|   |-- webpack.config.common.js
|   |-- webpack.config.development.js
|   `-- webpack.config.production.js
`-- public/
    `-- assets/

docker-compose-for-node.yml

version: '2.0'
services:
  node:
    image: node:10.15.0
    volumes:
      - .:/app:cached
      - node-modules:/app/client/node_modules
    working_dir: /app/client
volumes:
  node-modules:

package.json

{
  "devDependencies": {
    "coffee-loader": "0.9.0",
    "coffeescript": "2.3.2",
    "copy-webpack-plugin": "4.6.0",
    "css-loader": "2.1.0",
    "mini-css-extract-plugin": "0.5.0",
    "node-sass": "4.11.0",
    "sass-loader": "7.1.0",
    "webpack": "4.17.2",
    "webpack-cli": "3.2.1",
    "webpack-fix-style-only-entries": "0.1.0",
    "webpack-manifest-plugin": "2.0.4",
    "webpack-merge": "4.2.1"
  },
  "scripts": {
    "build": "webpack --config webpack.config.production.js",
    "watch": "webpack --config webpack.config.development.js --watch"
  },
  "dependencies": {
    "jquery": "2.1.3"
  }
}

webpack.config.common.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  entry: {
    'application': [
      './javascripts/application.js',
      './stylesheets/application.scss'
    ],
    'foo': './stylesheets/foo.scss',
    'bar': [
      './javascripts/bar.coffee',
      './stylesheets/bar.scss',
    ],
  },
  module: {
    rules: [
      {
        test: /\.coffee$/,
        use: [
          'coffee-loader'
        ]
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                path.resolve(__dirname, 'stylesheets/vendor')
              ]
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.coffee',
      '.js',
      '.scss'
    ]
  }
};

webpack.config.development.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.config.common.js');
const merge = require('webpack-merge');
const path = require('path');

module.exports = merge(
  common,
  {
    mode: 'development',
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../public/assets')
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'fonts/',
          to: '[path][name].[ext]'
        },
        {
          from: 'images/',
          to: '[path][name].[ext]'
        }
      ]),
      new FixStyleOnlyEntriesPlugin(),
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ],
  }
)

webpack.config.production.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.config.common.js');
const merge = require('webpack-merge');
const path = require('path');

module.exports = merge(
  common,
  {
    mode: 'production',
    output: {
      filename: '[name]-[hash].js',
      path: path.resolve(__dirname, '../public/assets')
    },
    plugins: [
      new ManifestPlugin({
        fileName: 'webpack-manifest.json',
        map: (file) => {
          file.name = file.name.replace(/(-[a-f0-9]{32})(\..+)$/, '$2');
          return file;
        }
      }),
      new CopyWebpackPlugin([
        {
          from: 'fonts/',
          to: '[path][name]-[hash].[ext]'
        },
        {
          from: 'images/',
          to: '[path][name]-[hash].[ext]'
        }
      ]),
      new FixStyleOnlyEntriesPlugin(),
      new MiniCssExtractPlugin({
        filename: '[name]-[hash].css'
      })
    ],
  }
)