Question

我正在尝试使用webpack-bundler编译所有我的tsx文件，这些文件位于一个bundle.js文件中。我的webpack.config.js是这样的：

var glob = require('glob');
module.exports = {
    entry: toObject(glob.sync('./src/editor/**/*.ts*')),
    output: {
        filename: "bundle.js",
        path: __dirname + "/out",
        library:'bundle',
        libraryTarget:'var'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.

};
function toObject(paths) {
  var ret = {};

  paths.forEach(function(path) {
    // you can define entry names mapped to [name] here
    ret[path.split('/').slice(-1)[0]] = path;
  });

  return ret;
}

现在，当我尝试编译它时，它给出了错误

“冲突：多个资产发出相同的文件名[bundle] .js”。每个文件都会出现同样的错误。这些文件本身就是个人的。

有人可以告诉我这样做的方法吗？

Answer 1

您似乎有多个entry点，但它们正在编译为具有相同名称的文件 - bundle.js。尝试替换：

output: {
        filename: "bundle.js",
        path: __dirname + "/out",
        library:'bundle',
        libraryTarget:'var'
    }

与

output: {
        filename: "[name].js",
        path: __dirname + "/out",
        library:'bundle',
        libraryTarget:'var'
    }

这样，您就可以为每个.ts文件获取单独的捆绑包。

或

为应用的entry点指定单个文件名：

entry: './src/editor/somefolder/app.ts',

webpack-bundler问题

1 个答案: