CSS/JS文件路径存在却报错，如何解决MIME类型及404问题？

问题描述 #

运行Webpack构建的前端项目时，CSS和JS文件实际存在对应路径，但出现两个错误：

• 拒绝应用样式，提示MIME类型为'text/html'不被支持
• GET请求http://localhost:8080/src/js/main.js返回404

用户提供的Webpack配置 #

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry : './src/index.js',
    output : {
        filename: "main.js",
        path: path.resolve(__dirname,"dist"),
    },
    module: {
        rules: [
          {
            test: /\.css$/,
             use: ["style-loader", "css-loader"],
            //use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
          {
            test: /\.jpg$/,
            use: ["file-loader"],
          },
        ],
      },
    plugins : [new HtmlWebpackPlugin({
       template: './index.html',         
    }),
    new MiniCssExtractPlugin({
        filename: "common.css",
    }),
    ],
    devServer : {
        static : {
            directory : path.resolve(__dirname,'dist'
            )
        },
        port: 8080,
    },
};

报错信息 #

Refused to apply style from 'http://localhost:8080/src/css/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:10 GET http://localhost:8080/src/js/main.js net::ERR_ABORTED 404 (Not Found)
index.js:551 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.
log.js:24 [HMR] Waiting for update signal from WDS...

解决方法 #

核心原因 #

模板文件index.html中手动引用了src目录下的本地文件，但Webpack Dev Server仅会暴露打包产物目录（默认是内存中的打包结果，配置中指定为dist），不会直接访问src目录。当请求不存在的路径时，Dev Server会返回index.html，导致样式请求拿到的是HTML文件，触发MIME类型错误；JS文件则因路径不存在直接返回404。

具体修复步骤 #

1. 清理index.html的手动引用
   删除index.html中类似以下的代码：

   <link rel="stylesheet" href="./src/css/main.css">
   <script src="./src/js/main.js"></script>
   

   HtmlWebpackPlugin会自动将Webpack打包后的JS、CSS文件注入到生成的index.html中，无需手动引用。

2. 解决CSS loader冲突
   当前配置同时启用了style-loader和MiniCssExtractPlugin，二者功能冲突，二选一即可：

   • 若要将CSS嵌入JS中动态插入：保留style-loader，删除MiniCssExtractPlugin的所有配置（包括plugins中的实例和module.rules里的相关注释代码）
   • 若要将CSS提取为单独文件：将module.rules中的style-loader替换为MiniCssExtractPlugin.loader，保留plugins中的MiniCssExtractPlugin实例

3. 验证配置并重启服务
   运行项目启动命令（如npm run dev），访问http://localhost:8080，检查控制台是否还有错误，页面样式和功能是否正常。

修正后的配置示例 #

提取CSS为单独文件的配置 #

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.jpg$/,
                use: ["file-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',         
        }),
        new MiniCssExtractPlugin({
            filename: "common.css",
        }),
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        port: 8080,
    },
};

嵌入CSS到JS的配置 #

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.jpg$/,
                use: ["file-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',         
        }),
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        port: 8080,
    },
};

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