やりたいこと
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