webpack5环境下ejs文件中结合asset/source使用内联loader的实现方法

适配webpack5的修改方案 #

报错原因 #

webpack5 不再默认内置raw-loader，你原有内联写法中的raw?会被识别为需要加载名为raw的第三方loader包，因此抛出找不到raw的错误。你配置中匹配?raw查询参数的asset/source规则，需要通过资源路径后缀带参数的形式才能触发，不能写在loader前缀位置。

具体修改步骤 #

1. 首先修改index.html.ejs中的内联引用写法，替换原有style标签内的require语句：

<style>
    <%= require("!!sass-loader!./src/styles.scss?raw").default %>
</style>

写法说明：

• !!前缀：跳过webpack配置中所有已定义的loader规则，避免和你已配置的scss处理规则（默认使用style-loader、css-loader）产生冲突
• 显式指定sass-loader：将scss文件编译为标准css内容
• 路径后缀加?raw：触发你配置中resourceQuery: /raw/对应的asset/source规则，将编译后的css内容作为纯文本返回，完全替代原有raw-loader的功能

2. 校验依赖安装
   确保项目已安装sass（dart-sass）作为开发依赖，sass-loader需要依赖它完成scss编译：

npm install sass --save-dev

修改完成后重新执行编译即可正常生效，和原有webpack4下的内嵌样式效果完全一致。

内容的提问来源于stack exchange，提问作者Józef Podlecki