Webpack 5 Dev server 无法加载CSS资源问题求助

云原生阿岚

2026-10-3

问题根源

开发模式下使用style-loader时，CSS代码会被编译到JS bundle中，运行时由style-loader动态插入到页面的<head>标签里，不会生成独立的.css物理文件，所以你在index.html中直接引入/style.css自然找不到资源。
你当前把less文件单独作为entry入口的方式在开发模式下无法生效，对应的style.js打包产物里只包含CSS加载逻辑，你没有在页面引入这个entry的JS文件，所以CSS逻辑根本不会执行。

解决方案

提供两种适配不同场景的可选项：

方案1：继续使用style-loader（保留HMR能力，推荐开发环境使用）

第一步：删除index.html里的<link href="/style.css" rel="stylesheet" />代码，不需要手动引入CSS。
第二步：在你的TS入口文件./src/index.bundle.ts第一行添加导入语句：import './index.bundle.less'，Webpack会自动把less代码打包到script.js里，开发模式下自动插入到页面生效，生产模式下会被MiniCssExtractPlugin抽成独立CSS文件。
第三步：可删除entry配置里的style: './src/index.bundle.less'这行，不需要单独作为入口。

方案2：需要手动引入独立CSS文件的调整方案

如果一定要在html里用link标签引入CSS，开发模式也需要生成独立.css文件：

调整loader配置，开发模式也用MiniCssExtractPlugin.loader替代style-loader，同时要配置devServer的devMiddleware.writeToDisk: true，让Webpack把打包产物写到静态目录里才能被访问到。
对应修改devServer配置参考：

devServer: {
    watchFiles: ['src/**/*.less'],
    static: {
        directory: path.join(__dirname, 'src'),
        watch: true,
    },
    devMiddleware: {
        writeToDisk: true, // 开发模式下把产物写到磁盘
    },
    compress: true,
    port: 9000,
    hot: true,
}