Webpack: use data from parent directory without copying

Question

I have a project folder structured like this:

project-name/   
  data/
   data.csv
  dist/
   index.js
  src/
   index.js

And want a remote directory like this:

project-name/   
  data/
   data.csv
  dist/
   index.js
    > `doSomething("../data/data.csv")`

How do I make this work in both webpack-dev-server and in the production path? If I use copywebpack plugin, then the data goes inside the dist/, which I don't want. But if I use a relative directory without copying the data, then the build fails.

Answer 1

Actually, you should use Webpack csv-loader in your Webpack configuration file like below:

module: {
  rules: [
    {
      test: /\.csv$/,
      loader: 'csv-loader',
      options: {
      dynamicTyping: true,
        header: true,
        skipEmptyLines: true,
      },
    },
  ],
},

And then use it inside your code like below:

import csvPath from './project-name/data/foo.csv'

Answer 2

Can you use an alias?

webpack.config.js:

  const path = require("path");

  module.exports = {
  ...

    resolve: {
      alias: {
        Data: path.resolve(__dirname, "./project-name/data/"),
      },
    },
  }

src/index.js:

  import data from "Data/data.csv"

Answer 3

Have you tried excluding it in the test? Something like this:

   {
    entry: "./src/index.js",
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ["babel-loader or whatever loader you use"],
        },
        {
          test: /\.csv$/,
          exclude: ["./data/"],
        },
      ],
    },
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "dist"),
    },
   },

There is a similar question on how to not bundle files in webpack here