Question

我目前处于需要以HTTPS模式启动NodeJS服务器的位置，需要读取cert文件，以便在https.createServer(options, app).listen(8443)命令中将它们作为选项提供。我很难掌握如何将文件读入使用Webpack 2捆绑的TypeScript文件。例如，

我有2个文件file.crt和file.key。我想在创建https服务器并开始侦听给定端口时读取这些文件。在常规的TS / JS土地上，我可以这样做：

```

＆＃13;

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

＆＃13;

然而，当webpack 2构建bundle时，这些文件并没有被引入，所以当node启动时它无法找到它们。好吧，我明白了，但我读到原始加载器会为此工作，所以我想我会尝试一下。

这是我的webpack配置文件：

＆＃13;

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

＆＃13;

我认为，这意味着ok扫描项目，当你找到任何带有.crt的文件时，然后将它们与源地图捆绑为utf8字符串。所有我需要做的就是这个import crtfile from 'file.crt'就像raw-loader doc状态一样，但是，typescript甚至无法编译文件现在声明它不能文件模块file.crt。请帮忙！！我撞墙了。

Answer 1

但是，当webpack 2构建捆绑包时，这些文件不会被引入，所以当节点启动时它无法找到它们。

Webpack仅捆绑您导入的文件。在您的情况下，您只是从文件系统中读取，而webpack不会触及这些功能。这并不意味着它在运行时不起作用，你只需要在你正在运行bundle的目录中找到你想要读取的文件，这些函数在bundle中没有不同的含义

如果您想拥有捆绑包中文件的内容，您确实可以使用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;
}

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

1 个答案: