复制Webpack插件

Question

我已在我的react应用程序的资产文件夹中放置了一个csv文件，但是该文件并没有通过webpack被添加到我的dist版本中（图像仍然作为资产添加到版本中，但是csv文件不是）。您可以在下面查看我的webpack版本。那么，如何通过webpack将CSV文件添加到dist版本中（目标是我的应用程序的用户能够下载此文件）？谢谢！

webpack.dev.js

Firefox 61.0.0 (Ubuntu 0.0.0) react encountered a declaration exception FAILED
    minErr/<@/bower_components/angular/angular.js:68:0 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:11726:12
    forEach@/bower_components/angular/angular.js:341:0 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:11999:11
    loadModules@/bower_components/angular/angular.js:4456:0 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:16114:5
    createInjector@/bower_components/angular/angular.js:4381:0 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:16039:11
    doBootstrap@/bower_components/angular/angular.js:1683:0 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:13341:20
    bootstrap@/bower_components/angular/angular.js:1704:0 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:13362:12
    require<[916]</exports.default@/tmp/react/stats/StatsSpec.js:28:2 <- /tmp/9729f3dfaf6103eb0b0e6466b3ce0c30.browserify:135749:3

webpack.common.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;

Answer 1

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

您也应该在导入图像时导入csv文件。

Answer 2

（此答案仅在服务器端引用）

除了@ 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"

Answer 3

如果您不需要处理/解析文件，而只是将它们复制到dist文件夹中，则可能需要检查CopyWebpackPlugin。

复制Webpack插件

将单个文件或整个目录复制到构建目录

安装
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 4

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

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

将CSV文件添加到Webpack构建中

4 个答案:

复制Webpack插件

安装

用法

模式