javascript - webpack - 在不捆绑的情况下编译 1 个 ts 文件（2 个条目）

问题描述

TL;博士

（vue 文件）+ background.ts => ...[webpack]... =>（捆绑的 vue 文件）+ background.js

无法执行 background.js
预期 background.js 仅包含“console.log('test');”

我有一个带有 webpack 和 typescript 的 vue 项目。

除了[vue JS相关文件]之外，我希望我的构建步骤生成一个“background.js”文件。

我在打字稿中有一个源文件：“background.ts”。

通过 vue.config.js 我添加了一个 webpack 条目“背景”。

它确实像我预期的那样构建了一个文件“background.js”

但它是捆绑的（我认为），它不能由 chrome 插件执行。

现在我想要的只是有一个执行“console.log('test');”的“background.js”文件。调用脚本时包含的指令。

谢谢，webpack 是地狱

编辑：添加文件：

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    filenameHashing: false,
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}

“$vue 检查”的内容 $vue 检查 > https://pastebin.com/6F3zwLhC

我尝试了什么：

导出一个函数而不是我的纯代码：

export default function() {
    console.log("gboDebug: background.ts dans export function");
}

// 而不仅仅是

console.log("gboDebug: background.ts dans export function");

在文件末尾添加这个，因为我在某处看到它：
```
   export default null;
```
检查我的 console.log 是否在 background.js 捆绑文件中
将 background.js 的结果粘贴到导航器中
使用脚本创建的 webpackJsonp 全局变量

我想到了什么：

有一个 npm 脚本，它 1-bundle-vue-webpack 然后用 babel-loader 2-transpile 我的文件
使用 webpack 中的库输出选项，但我认为它使代码可用于变量，加载时不会自动执行代码
- IIFE 中的 webpack 输出：https ://webpack.js.org/configuration/output/#outputiife

标签： javascripttypescriptvue.jswebpack

javascript - webpack - 在不捆绑的情况下编译 1 个 ts 文件（2 个条目）

问题描述

解决方案

推荐阅读