モジュールが見つかりません：エラー： './lib/axios'を解決できません

Question

私のプロジェクトでAxiosをインポートしようとしています。しかし、いくつかの理由から、webpack/axiosはビルドしようとすると大きなトラブルを引き起こしています。

GroupService.ts

import axios, { AxiosResponse, AxiosInstance } from 'axios'; 

のWebPACK --display-エラーの詳細エラー

ERROR in ./~/axios/index.js 
Module not found: Error: Can't resolve './lib/axios' in 'C:\dev\test-project\node_modules\axios' 
resolve './lib/axios' in 'C:\dev\test-project\node_modules\axios' 
    using description file: C:\dev\test-project\node_modules\axios\package.json (relative path: .) 
    after using description file: C:\dev\test-project\node_modules\axios\package.json (relative path: .) 
    using description file: C:\dev\test-project\node_modules\axios\package.json (relative path: ./lib/axios) 
     as directory 
     C:\dev\test-project\node_modules\axios\lib\axios doesn't exist 
     no extension 
     C:\dev\test-project\node_modules\axios\lib\axios doesn't exist 
     .ts 
     C:\dev\test-project\node_modules\axios\lib\axios.ts doesn't exist 
[C:\dev\test-project\node_modules\axios\lib\axios] 
[C:\dev\test-project\node_modules\axios\lib\axios] 
[C:\dev\test-project\node_modules\axios\lib\axios.ts] 
@ ./~/axios/index.js 1:17-39 
@ ./src/services/GroupService.ts 
@ ./src/test-project.ts 

ここに私のWebPACK構成です。

webpack.config.js

/** Plugin settings **/ 
var jsOutputFile = 'dist/testproject.min.js'; 
var cssOutputFile = 'dist/styles.css'; 

/** Webpack configuration **/ 
var webpack = require("webpack"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var extractCSS = new ExtractTextPlugin(cssOutputFile); 

module.exports = { 
    // application entry file 
    entry: "./src/test-project.ts", 

    // bundled application output file 
    output: { 
    path: __dirname, 
    filename: jsOutputFile 
    }, 

    // Currently we need to add '.ts' to the resolve.extensions array. 
    resolve: { 
    extensions: ['.ts'] 
    }, 

    // Source maps support ('inline-source-map' also works) 
    devtool: 'source-map', 

    // Add the loader for .ts files. 
    module: { 
    rules: [ 
     { 
     test: /\.tsx?$/, 
     use: 'ts-loader' 
     }, 
     { 
     test: /\.scss$/, 
     use: extractCSS.extract([ 
      { 
      loader: 'css-loader' 
      }, 
      { 
      loader: 'sass-loader' 
      } 
     ]) 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     minimize: true, 
     sourceMap: true, 
     compress: { 
     warnings: true 
     } 
    }), 
    extractCSS 
    ] 
}; 

Answer 1

typescriptですファイルを検索しようとするためのWebPACKは、axiosのエントリポイントを見つけることはできませんが、そのようなファイルがありません。解決拡張に.jsを追加する必要があります。ここでの詳細情報：https://webpack.js.org/configuration/resolve/#resolve-extensions

resolve: { 
 
    extensions: ['.ts', '.js'] 
 
    },