Why does webpack try to parse my readme.md files

Webpack throws errors shown below. The build seems to work, still, what gives?

WARNING in ./{snip}/readme.md Module parse failed: C:{snip}\readme.md Unexpected token (1:7) You may need an appropriate loader to handle this file type.

I could not find any way to ignore files. I don't even know why it is trying to render those files.

Here are some parts of my webpack settings file:

module: {
    loaders: [
        {test: /\.hb.html$/, loader: "handlebars-loader/?helperDirs[]=" + __dirname + "/src/handlebarsHelpers"},
        { test: /\.tsx?$/, loader: "ts-loader?" + JSON.stringify({
            transpileOnly: true
        })}
    ]
},

Entry:

entry: "./src/entry.ts",

and

resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],

I tried excluding .md files in typescript config file, also didn't work.

Solution

The accepted answer correctly describes the problem, but not the solution. I got this error while migrating from a non-bundled server to a bundled server.

For me, this was the problem:

  // Load the plugin.
  allMods[modName] = require(`../myDir/${modFile}`);

Solution 1 - Don't bundle the files

The solution for me was to prevent webpack from trying to import the file at build time, which it cannot do since it can't know the contents of the variable. This does mean though that your dynamic imports won't get bundled (which in my case was precisely the point because it's for a video game modding system).

Example:

  // Load the plugin.
  allMods[modName] = eval('require')(`../myDir/${modFile}`);

Solution 2 - Bundle the files using webpack's require.context()

Alternatively, if you do need the files bundled, you may also look at require.context() (docs, explanation).

It's quite customisable, this is one way to do it:

const allMods = {};

function importAll(fileContext) {
  fileContext.keys().forEach((key) => {
    // Note: This assumes we're using default rather than named exports. I
    // don't know how named exports would work as I've not tried that myself.
    allMods[key] = fileContext(key).default;
  })
}

importAll(require.context('./myDir1', true, /\.js$/));
importAll(require.context('./myDir2', true, /\.js$/));

// All imported files are now stored in allMods.
// Their keys are their repsective file names including their extensions.

Note that you'd place that function inside your application where you'd normally write your usual require.

If you're a TypeScript user, consider installing @types/webpack-env to make the language gods understand what you're doing.