typescript - ts-loader -> file-loader が必要な依存関係を解決しない

Question

サービスワーカーを作成したい。

免責事項：私はserviceworker-webpack-pluginを使用したくありません。必要のない多くのオーバーヘッドが追加されます。webpack がトランスパイルされた js/ts ファイルを静的ファイルとして提供できることは 100% 確信しています。

だから私は持っていmain.tsますsw.ts：

• main.tsdev-server がデフォルトで行うように、実行時にautoreloadts-loaderをサポートする必要があります。index.htmlwebpack-dev-server main.ts
• sw.ts一方ts-loader、 も同様にトランスパイルする必要があり、に注入すべきではありませんindex.html。また、実行するwebpack-dev-serverと、dev-server はそこに hotreload js コードを追加するべきではありません。私はただトランスプライドされたいだけですsw.js。
• sw.jsまた、実行時に から参照したいと思いますmain.js。ファイルローダーは、 の場合と同じ方法で提供する必要があります.css files。

試み #1

私の最初の試みは、以下のようにwebpack構成に2つのエントリを作成することでした:

entry: {'main': './src/main.ts', 'sw':'./src/sw.ts'},

sw.ts注入を防ぐために、 ifindex.ejsの js ファイル名を使用して手動でチェックすることができます。このシナリオは機能しますが、dev-server 上にある間、webpack-dev-server は hotreload コードを追加し、実行時に 内で失敗します。サービス ワーカーにはウィンドウ オブジェクトがないため、これは論理的です。sw.jswindow not defined

試行 #2、github へのリンク

しかし、次に試してみましfile-loaderた。これは次のようになります。

webpack.config.js :

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: ['./src/main.ts'],
  plugins: [
    new HtmlWebpackPlugin({hash: true, template: 'src/index.html'}),
  ],
  devtool: '#source-map',
  module: {
    rules: [
      {
        test: /sw\.ts$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          outputPath: '',
          name: 'sw.js?[sha512:hash:base64:6]',
        }
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
    ],
  },
};

tsconfig.json :

{
  "compilerOptions": {
    "lib": ["es2017", "dom"],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "./node_modules"
  ]
}

main.ts ;

import './sw.ts'
console.log('main.ts');

sw.ts :

import {LoggerFactory, LogStrict} from 'lines-logger';
console.log('sw file');
let loggerFactory: LoggerFactory = new LoggerFactory(LogStrict.LOG_WITH_WARNINGS);

出力sw.js :

import { LoggerFactory, LogStrict } from 'lines-logger';
console.log('sw file');
var loggerFactory = new LoggerFactory(LogStrict.LOG_WITH_WARNINGS);

なぜ webpack はモジュールの依存関係を解決しないのですか? Service Worker を処理する別の方法はありますか?