Добавление файла CSV в сборку веб-пакета

Question

Я поместил файл csv в папку ресурсов для моего приложения реагирования, однако этот файл не берется и не добавляется в мою сборку dist через веб-пакет (изображения по-прежнему добавляются в качестве ресурсов в сборку, но файл csv не является). Вы можете увидеть мой веб-пакет ниже. Итак, как мне добавить файл csv в мою сборку dist через веб-пакет (цель состоит в том, чтобы пользователи моего приложения могли загрузить этот файл)? Спасибо!

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

const config = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        secure: false,
      },
    },
    allowedHosts: [
      'localhost',
      'fatpandadev'
    ],
    public: 'fatpandadev:8080'
  },
});

module.exports = config;

webpack.common.js

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

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config = {
  entry: [
    "babel-polyfill",
    `${SRC_DIR}/app/index.js`,
    `${SRC_DIR}/app/assets/stylesheets/application.scss`,
    `${SRC_DIR}/app/components/index.scss`,
    "font-awesome/scss/font-awesome.scss",
    "react-datepicker/dist/react-datepicker.css",
    "rc-time-picker/assets/index.css",
    "react-circular-progressbar/dist/styles.css",
    "@trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
  ],
  output: {
    path: `${DIST_DIR}/app/`,
    filename: "bundle.js",
    publicPath: "/app/"
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          failOnWarning: false,
          failOnError: true
        }
      },
      {
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2']
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 7,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: path.resolve(__dirname, "node_modules"),
        include: __dirname,
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        // loader: "url?limit=10000"
        use: "url-loader"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader'
      },
      {
        test: /\.(txt|csv)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "application.css"
    })
  ]
};

module.exports = config;

Answer 1

Возможно, вы захотите проверить CopyWebpackPlugin , если вам не нужно обрабатывать / анализировать файлы, а только копировать их в папку dist.

Copy Webpack Plugin

Копирует отдельные файлы или целые каталоги в каталог сборки

Установить

npm i -D copy-webpack-plugin

Использование

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = {
    plugins: [
      new CopyWebpackPlugin([ ...patterns ], options)
    ]
  }

Шаблоны

Простой шаблон выглядит так

{ from: 'source', to: 'dest' }

Answer 2

(на этот ответ ссылаются только на стороне сервера)

В дополнение к @ PlayMa256, На стороне сервера (Nodejs runtime) вам может понадобиться emitFile: true

{
  test: /\.(txt|csv|mmdb)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: "[path][name].[ext]",
        emitFile: true,
      },
    },
  ],
},

См. Этот PR: https://github.com/webpack-contrib/file-loader/pull/135

На мой взгляд, file-loader путь кажется лучше, чем copy-webpack-plugin способ.

Вы можете проверить, как показано ниже:

import csvPath from './assets/data.csv'
console.log(csvPath)          // assets/data.csv

Протестированная версия:

$ cat node_modules/webpack/package.json | jq .version
"4.29.5"
$ cat node_modules/file-loader/package.json | jq .version
"3.0.1"

Answer 3

{
        test: /\.(txt|csv)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }

Вы должны импортировать свой CSV-файл, так как вы импортируете свои изображения тоже.