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

Posted 2023-02-19

【中文标题】webpack 代码拆分 - 创建一个额外的 bunlde: 0.bundle.js

【英文标题】：webpack code splitting - creates an extra bunlde: 0.bundle.js

【发布时间】：2018-02-24 19:02:30

【问题描述】：

我有以下 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/ 加载。这个文件是什么，如何指定加载路径？

【问题讨论】：

您有解决方案吗？我也面临同样的问题

【参考方案1】：

我相信你会想要在 webpack 配置中添加一个 publicPath。就在您实际阅读它们的任何地方。 output: filename: 'bundle.js', path: path.resolve(__dirname, 'public/dist'), publicPath: './dist/' ,