Webpack resolve.alias không hoạt động với bản ghi?

Question

tôi cố gắng rút ngắn nhập khẩu của tôi trong nguyên cảo

từ import {Hello} from "./components/Hello";

để import {Hello} from "Hello";

Cho rằng tôi phát hiện ra bạn có thể sử dụng resolve.alias trong webpack vì vậy tôi cấu hình phần đó như sau

resolve: { 
    root: path.resolve(__dirname), 
    alias: { 
     Hello: "src/components/Hello" 
    }, 
    extensions: ["", ".ts", ".tsx", ".js"] 
}, 

Xây dựng Webpack và bundle.js đầu ra hoạt động. Tuy nhiên, intellisense của typecript phàn nàn nó cannot find the module

Vì vậy, câu hỏi của tôi là có hay không solution.alias của webpack làm việc với các kiểu chữ?

Tôi tìm thấy sau issue nhưng không có câu trả lời cho nó.

Answer 1

Nếu bạn đang sử dụng ts-loader, bạn có thể phải đồng bộ hóa webpack bạn alias/resolve thiết lập với khung cảnh paths của bạn trong tsconfig.json của bạn.

{ 
    "compilerOptions": { 
     "baseUrl": "./", 
     "paths": { 
      "Hello": ["src/components/Hello"] 
     } 
    } 
} 

Nếu bạn đang sử dụng awesome-typescript-loader, sau đó webpack có thể con số này ra tự động từ các thiết lập paths trong tsconfig.json của bạn, theo the status on this issue from the repo. Bằng cách đó, bạn không cần phải sao chép cùng một thông tin trong trường Webpack của bạn alias.

Answer 2

tôi nghĩ bạn có thể làm điều này và đã cho nó hoạt động theo cách bạn mô tả:

resolve: { 
    root: [ 
     path.resolve(__dirname), 
     <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components') 
    ], 
    extensions: ["", ".ts", ".tsx", ".js"] 
}, 

Sau đó, bạn có thể làm import {Hello} from "Hello";

Tôi biết tôi làm điều này để giải quyết đường dẫn tập tin trong thư mục src/js của tôi . Tôi không sử dụng kiểu chữ mặc dù, nhưng tôi không nghĩ rằng nó sẽ ảnh hưởng đến kết quả.