Power BI自定义可视化项目运行出现Webpack assets/status 404错误

问题原因排查 #

你的配置存在4处错误，直接导致了404报错：

• 输出文件名不匹配：Power BI自定义可视化开发环境默认会请求visual.js，但你当前配置的输出文件名是[name].bundle.js，打包后生成的文件为main.bundle.js，路径不匹配导致404
• 静态资源路由不匹配：你修改publicPath为/assets/是正确的，但devServer的静态资源配置没有对应加上/assets/路由前缀，请求路径和本地资源存放路径无法对应
• 开发模式参数错误：PowerBICustomVisualsWebpackPlugin配置中devMode设为了false，开发模式下该参数必须为true才会生成/assets/status接口和所需的临时开发资源
• CSS loader配置缺失：你引入了MiniCssExtractPlugin但没有在CSS/LESS处理规则中使用对应的loader，样式文件无法正常打包输出，后续也会触发资源加载报错

修复方案 #

按以下步骤修改webpack.config.js配置即可：

1. 修改output配置
   将原output部分替换为：

output: {
    path: path.join(__dirname, "/.tmp","drop"),
    publicPath: '/assets/',
    filename: "visual.js",
},

2. 修改devServer静态资源配置
   将devServer中原static: path.join(__dirname, "/.tmp", "drop")替换为：

static: {
    directory: path.join(__dirname, "/.tmp", "drop"),
    publicPath: "/assets/"
},

devServer下其他原有配置保持不变。

3. 修改插件开发模式参数
   找到PowerBICustomVisualsWebpackPlugin的配置项，将devMode: false修改为devMode: true。

4. 补全CSS/LESS处理规则
   将module.rules中CSS和LESS的处理规则替换为：

{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.less$/, use: [
    MiniCssExtractPlugin.loader,
    {
        loader: 'css-loader',
    },
    {
        loader: 'less-loader',
    },
] }

其他loader规则保持不变。

修改完成后先删除项目根目录下的.tmp和dist文件夹，再重新执行项目启动命令即可解决404报错。

内容的提问来源于stack exchange，提问作者Pokrol