89488


# やりたいこと

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

# 期待する結果

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

raw.txt

[code]

    aaaa
    
[/code]

index.js

[code]

    import raw from 'raw-loader!./raw.txt';
    
    export function main(){
      console.log(raw);
    }
    
[/code]

期待される出力

[code]

    aaaa
    
[/code]

# 実際の結果

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

[code]

    export default "aaaa";
    
[/code]

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

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

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

* * *

詳細な構成は以下です。

ファイル

[code]

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

webpack.config.js

[code]

    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
    ];
    
[/code]

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


CC BY-SA 4.0
2022-06-20T02:48:42.263
89482
2022-06-20T04:43:46.023
52932
question
javascript webpack
Webpackのloaderを通すとファイルの内容が変わってしまう


自己解決しました。

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

参考：

  * [webpack 5からurl-loader/file-loader/raw-loaderが要らなくなった](https://qiita.com/Tsukina_7mochi/items/e031f12a122e05ff8d87)
  * [【webpack5】静的ファイルの公開設定にAsset Modulesを使う](https://marsquai.com/745ca65e-e38b-4a8e-8d59-55421be50f7e/99181429-1958-4966-90c1-2e9357ecf450/9c23df88-0922-49c6-b4c1-20050cc1e91e/)


CC BY-SA 4.0
2022-06-20T04:38:34.610
89488
2022-06-20T04:43:46.023
2022-06-20T04:43:46.023
3060
52932
89482
answer