如何使用Webpack 2 Raw-Loader來讀取文件

Question

我目前被困在一個地方，我需要在HTTPS模式下啓動一個NodeJS服務器，並且需要讀取證書文件以便將它們作爲https.createServer(options, app).listen(8443)命令。我很難理解如何將文件讀取到使用Webpack 2捆綁的TypeScript文件中。 例如，

我有2個文件file.crt和file.key。我想在創建https服務器並開始監聽給定端口時讀取這些文件。在常規的TS/JS的土地，我可以這樣做：

```

import Config from '../env/config'; 
 
import Express from '../lib/express'; 
 
import * as https from 'https'; 
 

 
import * as fs from 'fs'; 
 

 
let config = new Config(); 
 
let app = Express.bootstrap().app; 
 

 
export default class AppService{ 
 

 
    constructor(){ 
 
    // console.log('blah:', fs.readFileSync('./file.txt')); 
 
    } 
 

 
    start(){ 
 

 
    let options = { 
 
     key: fs.readFileSync('file.key'), 
 
     cert: fs.readFileSync('file.crt'), 
 
     ca: fs.readFileSync('ca.crt'), 
 
     passphrase: 'gulp' 
 
    }; 
 

 
    https.createServer(options, app).listen(config.port,()=>{ 
 
     console.log('listening on port::', config.port); 
 
    }); 
 

 
    } 
 
}

然而，當的WebPack 2建立這些文件的arent被帶到束中的，所以當節點啓動它不能找到它們。好吧，我明白了，但我讀過那個原始裝載機將爲此工作，所以我想我會試一試。

這裏是我的WebPack配置文件：

// `CheckerPlugin` is optional. Use it if you want async error reporting. 
 
// We need this plugin to detect a `--watch` mode. It may be removed later 
 
// after https://github.com/webpack/webpack/issues/3460 will be resolved. 
 
const {CheckerPlugin} = require('awesome-typescript-loader'); 
 
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); 
 

 
module.exports = { 
 
    target: 'node', 
 
    entry: './src/server.ts', 
 
    output: { 
 
    filename: 'dist/bundle.js' 
 
    }, 
 
    resolve: { 
 
    extensions: ['.ts', '.tsx', '.js', '.jsx'] 
 
    }, 
 
    
 
    devtool: 'source-map', 
 
    
 
    module: { 
 
    rules: [ 
 
     {test: /\.ts$/, use: 'awesome-typescript-loader'}, 
 
     {test: /\.json$/, loader: 'json-loader'}, 
 
     {test: /\.crt$/, use: 'raw-loader'} 
 
    
 
    ] 
 
    }, 
 
    plugins: [ 
 
    new CheckerPlugin() 
 
    ], 
 
    node: { 
 
    global: true, 
 
    crypto: 'empty', 
 
    fs: 'empty', 
 
    net: 'empty', 
 
    process: true, 
 
    module: false, 
 
    clearImmediate: false, 
 
    setImmediate: false 
 
    } 
 
};

對此，我認爲，是指確定掃描項目，當你發現有任何.crt的文件，然後捆綁起來與源地圖作爲utf8字符串。我所要做的就是這個import crtfile from 'file.crt'就像raw-loader文檔狀態一樣，但是typescript甚至不能編譯文件，現在說它不能寫入模塊file.crt。請幫助！！我打了一堵牆。

Answer 1

但是，當webpack 2構建捆綁包時，這些文件不會被引入，因此當節點啓動時無法找到它們。

Webpack僅捆綁您導入的文件。在你的情況下，你只是從文件系統讀取，而webpack不會觸及這些功能。這並不意味着它在運行時不起作用，只需要在運行該包的目錄中擁有要讀取的文件，這些函數在包中沒有不同的含義。

如果你想擁有包中文件的內容，你確實可以使用raw-loader。首先，import語句需要是一個相對路徑，否則它會查找一個模塊。

import crtfile from './file.crt'; 

你的配置可以在JavaScript中正常工作。在TypeScript中，導入內容爲：

import * as crtfile from './file.crt'; 

但是TypeScript不喜歡導入其類型未知的文件。您可以通過在聲明文件中定義類型來解決該問題，例如custom.d.ts（如Importing non code assets所示）。

declare module "*.crt" { 
    const content: any; 
    export default content; 
}