ts-loadeR语言 > 文件加载器不解析需要依赖项

Question

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

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

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

• main.ts应该通过ts-loader转译并注入到index.html中，当我运行时webpack-dev-servermain.ts应该支持自动重新加载，就像开发服务器默认所做的那样。
• 另一方面，sw.ts也应该通过ts-loader进行转译，并且不会注入index.html。另外，如果我运行webpack-dev-server，开发服务器不应该在那里添加热加载js代码。我只想sw.js被翻译。
• 我还想在运行时从main.js引用sw.js。文件加载器应该以与.css files相同的方式提供它。

试探 #1

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

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

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

Attemp #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"
]
}

主要.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);

输出软件.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 (