BETA

webpack、typescriptでpngファイルをバンドルする

投稿日:2019-04-08
最終更新:2019-04-14

webpackで画像をバンドルする

以下のURLを参考にやってみた。
https://qiita.com/koichirokamoto/items/1bdbee5dd5657012b5fa

typescriptだとimport png from './image.png'のように書くとエラーになる。

Cannot find module './image.png'  

うーん、この。

例によって、ググってみると、こんなページに行き着く。
https://stackoverflow.com/questions/43638454/webpack-typescript-image-import?rq=1

どうやらjpn、pngの型定義がないがゆえのエラーのよう。なので、型定義を追加すればいい。

どこに追加するの?

さて、typescript初心者の私には型定義を独自に定義する方法を調べるところから始めないといけない。
幸い、Qiitaにこんな記事があった。
https://qiita.com/mtgto/items/e30d1529ca298e49557e

以上を踏まえた上で、webpackとtypescriptで画像ファイルをバンドルする方法をまとめていく。

webpackで画像ファイルをバンドルする

  1. file-loaderurl-loaderをインストールする。

    $ yarn add -D file-loader url-loader  
  2. webpack.config.jsに追記する。

    module.exports = {  
     entry: './src/index.tsx',  
     output: {  
         path: `${__dirname}/dist`,  
         filename: '[name].js',  
     },  
     devtool: 'source-map',  
     resolve: {  
         extensions: ['.ts', '.tsx', '.js'],  
     },  
     module: {  
         rules: [  
             {  
                 test: /\.tsx?$/,  
                 use: [  
                     {  
                         loader: 'ts-loader',  
                     },  
                 ],  
             },  
             {  
                 // 追記          
                 test: /\.png$/,  
                 loaders: 'url-loader',  
             },  
         ],  
     },  
    }  
  3. pngの型定義を作成する。
    types以下にimport-png.d.tsを作成する。

    declare module "*.png" {  
         const value: any;  
         export default value;  
    }  
  4. 独自の型定義をコンパイルする。
    tscに独自の型定義ファイルの場所を教えてあげる必要がある。
    tsconfig.jsonに以下を追記する。

    {  
     "compilerOptions": {  
         "baseUrl": "./", // 追記  
         "paths": {"import-png": ["types/import-png"]}, // 追記  
         "typeRoots": ["types", "node_modules/@types"], // 追記  
     }  
    }  

    これで、import png from './image.png'のように書いてもちゃんとコンパイルが通るようになる。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@qrunchdxmの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!