🐛 Uses file-loader for image assets. Fixes #139, fixes #138.

package.json

@@ -35,7 +35,9 @@
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.1.0",
+    "extract-loader": "^1.0.1",
     "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
     "ft-graphics-deploy": "^2.1.2",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",

views/includes/html-head.html

@@ -8,7 +8,7 @@
 <link rel="preconnect" href="https://cdn.polyfill.io">
 
 {# Stylesheets #}
-<link inline rel="stylesheet" href="top.css">
+<link rel="stylesheet" href="components/core/top.css">
 <link rel="stylesheet" href="https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-normalise@^1.2.1,o-fonts@^3.0.1,o-grid@^4.3.3,o-typography@^5.1.1,o-header@^7.0.4,o-card@^3.0.0,o-footer@^6.0.2{{',o-comments@^4.0.2' if flags.comments}}{{ ',o-share@^5.0.0' if flags.shareButtons }}{{ ',o-ads@^7.0.0' if flags.ads}}">
 
 {%- if stylesheets %}{% for stylesheet in stylesheets %}

webpack.config.babel.js

@@ -1,11 +1,9 @@
 import 'babel-polyfill';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ImageminWebpackPlugin from 'imagemin-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { readFileSync, writeFileSync } from 'fs';
-import { HotModuleReplacementPlugin } from 'webpack';
-import { resolve, extname } from 'path';
+// import { HotModuleReplacementPlugin } from 'webpack';
+import { resolve } from 'path';
 import getContext from './config';
 import * as nunjucksFilters from './views/filters';
 
@@ -47,11 +45,46 @@ module.exports = async (env = 'development') => ({
           },
         },
       },
+      {
+        test: /\.(png|jpe?g|gif)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'images/',
+              name: '[name]--[hash].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name]--[hash].[ext]',
+            },
+          },
+          {
+            loader: 'extract-loader',
+          },
+          { loader: 'css-loader', options: { sourceMap: true, url: true } },
+          { loader: 'postcss-loader', options: { sourceMap: true } },
+        ],
+      },
       {
         test: /\.(html|njk)$/,
         use: [
           {
             loader: 'html-loader',
+            options: {
+              attrs: [
+                'img:src',
+                'link:href',
+              ],
+              root: resolve(__dirname, 'client'),
+            },
           },
           {
             loader: 'nunjucks-html-loader',
@@ -61,12 +94,12 @@ module.exports = async (env = 'development') => ({
               ],
               filters: nunjucksFilters,
               context: await getContext(),
-            }
+            },
           },
-        ]
+        ],
       },
       {
-        test: /\.s?css/,
+        test: /\.scss/,
         use: ExtractTextPlugin.extract({
           use: [
             { loader: 'css-loader', options: { sourceMap: true } },
@@ -96,15 +129,6 @@ module.exports = async (env = 'development') => ({
     new HtmlWebpackPlugin({
       template: 'client/index.html',
     }),
-    new CopyWebpackPlugin(
-      [
-        { from: 'client/components/core/top.css', to: 'top.css' },
-        { from: 'client/images/*.+(jpg|jpeg|svg|png|gif)', to: 'images/', flatten: true },
-      ],
-      {
-        copyUnmodified: true,
-      },
-    ),
     env === 'production'
       ? new ImageminWebpackPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
       : undefined,