1

やりたいこと

Webpackする時に、テキストファイルをそのままstringとしてimportしたい。
(最終的にglslifyを使ってglsl文字列を扱いたい)

期待する結果

以下の内容でWebpackし、メインのjsを走らせた時に「aaaa」が出力される。

raw.txt

aaaa

index.js

import raw from 'raw-loader!./raw.txt';

export function main(){
  console.log(raw);
}

期待される出力

aaaa

実際の結果

出力された内容は以下でした。

export default "aaaa";

(シンタックスハイライトされてしまいますが、文字列です)

ロードされるraw.txtの内容が、元の内容を文字列としてexportするjsファイルのように書き変わってしまっています。
一方で、この書き変わった内容全体が文字列として読み込まれているので、exportされた内容をimportするようなこともできません。

raw.txtの内容をそのまま読み込むか、jsの形に書き変わった内容をjsとして読み込むかするには、どうすれば良いでしょうか?


詳細な構成は以下です。

ファイル

root
│  node_modules
│  package.json
│  webpack.config.js
└─ src
    └─ js
        │  index.js
        └─ raw.txt
└─ dist
    │  main.js
    └─ index.html

webpack.config.js

var path = require('path');
var test = {
  mode: 'development',
  target: ['web', 'es6'],
  entry: path.join(__dirname, 'src/js/index.js'),
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname,'dist'),
    libraryTarget: 'umd'
  },
  node: {
    __dirname: false,
    __filename: false
  },
  module: {
    rules: [
    {
      test: /\.txt$/i,
      use: 'raw-loader',
    }
    ]
  },
  resolve: {
    extensions: ['.js', '.ts']
  },
};
module.exports = [
  test
];

macOS: 12.3
node: v16.4.1
webpack: 5.64.1
webpack-cli: 4.9.1
raw-loader:4.0.2

1 件の回答 1

0

自己解決しました。

raw-loaderはWepBack4以前のためのもので、WebPack5からはAsset Moduleを使うようです。
これらを導入したところ無事に動きました。

参考:

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。