我想创建一个服务人员。
免责声明：我不想使用serviceworker-webpack-plugin，它增加了很多我根本不需要的开销。我 100% 确定 webpack 能够将转译的 js/ts 文件作为静态文件提供。
所以我有main.ts并且sw.ts：
main.ts应该通过编译ts-loader并注入index.html，当我运行时webpack-dev-servermain.ts应该支持 autoreload ，正如 dev-server 默认情况下所做的那样。sw.ts另一方面，也应该通过编译ts-loader，并且不应该将其注入index.html. 此外，如果我运行webpack-dev-server，开发服务器不应该在那里添加 hotreload js 代码。我只想sw.js被翻译。- 另外我想
sw.js在运行时从main.js. File-loader 应该以与.css files.
尝试#1
我的第一次尝试是在 webpack 配置中创建 2 个条目，如下所示：
entry: {'main': './src/main.ts', 'sw':'./src/sw.ts'},
为了防止sw.ts注入，我可以使用index.ejs并手动检查 js 文件名中的if。这种情况有效，但是在开发服务器上时，webpack-dev-server 添加了 hotreload 代码并sw.js在运行时失败window 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"
]
}
主要.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 不解析模块依赖？是否有另一种处理服务人员的方法？