Laravel项目移除Laravel Mix后Webpack+Vue静态HTML样式加载异常

• 当前配置的CSS处理链路存在两个核心错误，直接导致静态HTML场景下样式丢失
• 错误1：同一CSS规则中同时配置了两个功能互斥的样式注入loader：vue-style-loader（负责把样式以<style>标签形式注入DOM）和MiniCssExtractPlugin.loader（负责把样式抽取为独立CSS文件），二者不能共存于同一条loader链
• 错误2：Webpack的loader执行顺序为从右到左、从下到上，当前的loader顺序完全颠倒，导致样式处理流程断裂
• 之前使用html-webpack-plugin时样式能正常加载，本质是该插件会自动把抽取出来的CSS文件以<link>标签注入到生成的HTML head中，掩盖了配置错误；当手动编写静态HTML、仅引入打包后的JS时，自动注入逻辑不存在，样式自然无法加载

根据可接受的样式输出形式，可二选一实现兼容：

方案A：样式内联到JS包（和Laravel Mix开发环境行为一致，无需手动引入CSS文件） #

适合纯静态HTML/Blade模板场景，打包后的JS执行时会自动把SFC的样式插入页面，不需要额外手动写CSS引用

• 从插件列表中移除MiniCssExtractPlugin的实例和对应配置
• 修正CSS规则的loader顺序，移除互斥的MiniCssExtractPlugin.loader：

{
  test: /\.((c|sa|sc)ss)$/i,
  use: [
    // 最左侧为最后执行的loader：负责把解析完成的CSS注入DOM
    'vue-style-loader',
    // 右侧为最先执行的loader：负责预处理、解析样式
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ]
}

• 不需要修改main.js、App.vue的原有逻辑，静态HTML中仅保留对dist/js/main.js的引用即可

方案B：样式抽取为独立CSS文件（适合生产环境加载优化） #

适合需要减少JS包体积、通过浏览器缓存静态CSS的场景

• 从CSS规则中移除互斥的vue-style-loader，保留MiniCssExtractPlugin.loader作为样式抽取入口
• 修正CSS规则的loader顺序：

{
  test: /\.((c|sa|sc)ss)$/i,
  use: [
    // 最左侧为最后执行的loader：负责把CSS内容抽取为独立文件
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ]
}

• 打包完成后会自动生成dist/css/main.css文件，需要在静态HTML的head标签中手动引入：

<link rel="stylesheet" href="dist/css/main.css">

• 移除html-webpack-plugin无变化：该插件仅负责HTML生成和资源自动注入，不参与样式打包链路，和样式加载失效无关联
• 修改Vue别名无变化：Vue别名仅影响Vue运行时的代码加载路径，和SFC的样式处理逻辑完全独立
• 移除mini-css-extract-plugin后连自动生成的HTML场景下样式也不生效：原有loader顺序错误、互斥loader共存的问题没有解决，即使去掉抽取插件，vue-style-loader也无法正确处理样式并完成注入

• Vue别名可调整为"vue$": "vue/dist/vue.runtime.esm-bundler.js"，适配Vue2最新的打包规范，消除运行时警告
• CleanWebpackPlugin的cleanStaleWebpackAssets可调整为true，避免每次构建残留旧的无用资源

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