Question

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

免责声明：我不想使用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进行转译，并且 SHOUDN'T 应当注入index.html中。另外，如果我运行webpack-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，我可以使用index.ejs并手动检查if的js文件名。这种情况有效，但是在开发服务器上时，webpack-dev-server添加了热重载代码，并且sw.js在运行时在window not defined内失败，这是合乎逻辑的，因为服务工作者没有窗口对象。 / p>

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无法解决模块依赖性？还有另一种方法来处理服务人员吗？

Answer 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）

ts-loader->文件加载器无法解决所需的依赖项

尝试1号

Attemp #2, link to github

1 个答案: