如何使用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 构建 bundle 时，这些文件并没有被引入，所以当节点启动时它找不到它们。好吧，我明白了，但我读到原始加载器将为此工作，所以我想我会试一试。

这是我的 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 doc 状态一样，但是，打字稿甚至不能编译文件现在声明它不能文件模块 file.crt。请帮助！！我撞墙了。

Answer 1

However, when webpack 2 builds the bundle these files arent being brought in, so when node starts up it cant find them.

Webpack 只打包您导入的文件。在您的情况下，您只是从文件系统中读取，而 webpack 不会触及这些功能。这并不意味着它在运行时不起作用，您只需要将您尝试读取的文件放在运行捆绑包所在的目录中，函数不'在捆绑中有不同的含义。

如果你想拥有bundle中文件的内容，确实可以使用raw-loader。首先导入语句需要是一个相对路径，否则它会寻找一个模块。

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;
}

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

How to use Webpack 2 Raw-Loader to read files

node.js

webpack

raw-loader

webpack-2

typescript2.0