ts-loader -> file-loader 不解析需要依赖项答案

【问题标题】：ts-loader -> file-loader doesn't resolve require dependenciests-loader -> file-loader 不解析需要依赖项
【发布时间】：2018-12-16 02:01:08
【问题描述】：

我想创建一个服务工作者。

免责声明：我不想使用serviceworker-webpack-plugin，它增加了很多我根本不需要的开销。我 100% 确定 webpack 能够将转译的 js/ts 文件作为静态文件提供。

所以我有main.ts 和sw.ts：

main.ts 应该通过 ts-loader 转译并注入到 index.html，当我运行 webpack-dev-server main.ts 应该支持 autoreload ，就像 dev-server 默认支持的那样。
另一方面，sw.ts 也应该通过ts-loader 进行转译，并且它不应该注入index.html。此外，如果我运行webpack-dev-server，则开发服务器不应在此处添加 hotreload js 代码。我只想转译sw.js。
我还想在运行时从main.js 获得对sw.js 的引用。 File-loader 应该以与 .css files 相同的方式提供它。

尝试 #1

我的第一次尝试是在 webpack 配置中创建 2 个条目，如下所示：

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

为了防止sw.ts 注入，我可以使用index.ejs 并手动检查if 的js 文件名。这种情况可行，但在开发服务器上时，webpack-dev-server 添加了 hotreload 代码，sw.js 在运行时在window not defined 内失败，这是合乎逻辑的，因为服务工作者没有窗口对象。

Attemp #2, link to 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 的方法？

【问题讨论】：

标签： typescript webpack webpack-dev-server webpack-file-loader ts-loader

【解决方案1】：

我的建议（您不会喜欢它）是服务人员涉及一些复杂性。我建议使用像 WorkBox 这样的项目来让你的生活更轻松：

https://developers.google.com/web/tools/workbox/guides/generate-service-worker/webpack

我过去曾写过有关此的博客，以防万一：https://blog.johnnyreilly.com/2017/11/the-typescript-webpack-pwa.html

抱歉，我知道这不是您想要的。（ts-loader 上的相关问题：https://github.com/TypeStrong/ts-loader/issues/804）

【讨论】：