将csv文件添加到webpack构建中

Question

将csv文件添加到webpack构建中

10

我已经将一个csv文件放在我的React应用的assets文件夹中，但是这个文件没有被Webpack捡起来并添加到我的dist构建中（图片仍然被作为资产添加到构建中，但csv文件没有）。您可以在下面看到我的Webpack构建。那么，如何通过Webpack将一个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;

- Jimmy

1

https://github.com/theplatapi/csv-loader - connexo

4个回答

3

如果您不需要处理/解析文件，只需将它们复制到dist文件夹中，请查看CopyWebpackPlugin。

Copy Webpack Plugin

Copies individual files or entire directories to the build directory

Install
npm i -D copy-webpack-plugin
Usage

webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')

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

A simple pattern looks like this
{ from: 'source', to: 'dest' }

- connexo

2

但是如果我不想使用工具将我的CSV文件转换为JSON，而是希望我的用户可以下载我的CSV文件（从而成为外部可访问的资产），该怎么办？ - Jimmy

点赞。我尝试了许多在Webpack 4和5.10中使用file-loader的排列组合；但是没有一种方法能够“加载”CSV文件，尽管有趣的是，我却可以“加载”JSON文件。最后，我使用了CopyWebpackPlugin，问题得以解决。 - Marcus Junius Brutus

2

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

您应该像导入图片一样导入CSV文件。

- PlayMa256

不幸的是，正如您在我的第二个文件底部所看到的那样，我已经尝试过那个方法，但它仍然没有起作用。 - Jimmy

你的文件中没有CSV条目。 - PlayMa256

抱歉，我更新了。我尝试测试了txt和csv文件，但它没有起作用。 - Jimmy

2

使用 raw-loader 导入您的 csv 文件，

{
          test: /\.csv$/i,
          use:  'raw-loader',
}

- Reza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alfred · Accepted Answer

（这个答案仅在服务器端被引用）

除了@PlayMa256提到的方法，在服务器端（Nodejs运行时），您可能需要使用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"