webpack代码拆分 - 创建一个额外的bunlde:0.bundle.js

Question

我有以下webpack配置:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        source1: './frontend/source1.js',
        source2: './frontend/source2.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'static/bundles')
    },
    plugins: [
        new CleanWebpackPlugin(['static/bundles'])
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader', //  ??? .vue-??????
                options: {
                    loaders: {
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        }
    }
};

当我运行webpack时,我希望它能生成两个文件:source1.bundle.js和source2.bundle.js.

但它也会产生一种神秘感0.bundle.js并将其放在与其他文件相同的目录中.

然后,当我打开浏览器时,我收到一个错误:

因为我的捆绑包是从一个单独的绝对/static/bundles/目录加载的,而这0.bundle.js是试图从当前页面加载而不是/static/bundles/.这个文件是什么,我该如何为它指定加载路径？

Answer 1

我相信您会想要将 publicPath 添加到 webpack 配置中。无论您实际从何处阅读它们。 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public/dist'), publicPath: './dist/' },