webpack打包多页应用，style-loader、css-loader无法处理css文件

Question

尝试着通过webpack打包一个多页(多html文件)应用，但是在通过css-loader和style-loader打包css文件时，发现入口js导入的css无法打包到html文件的head标签部分（并且尝试着通过extract-text-webpack-plugin提取css为单独文件也报错了——暂不考虑）

webpack配置文件如下：

module: {
    rules: [
        //……
        {
            test: /\.css$/,
            use:['style-loader','css-loader']
        },
    ],
},

js入口（chunk）文件如下（src/pages/about/index.js）：

import './css/index.css'
export default {
    
}

源码地址：https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

使用方式：

1. 克隆项目到本地
   git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git
2. 安装依赖模块
   npm install
3. 打包代码
   npm run build

格式化打包后的html会发现head标签内没有style标签及样式内容

——————————————————————————————————————————————————

补充：

突然发现一个奇怪的问题？我的package.json里面安装了html-webpack-plugin、css-loader、style-loader，但是控制台的打包信息却只出现了前两者，style-loader并没有出现。

Answer 1

你是期望html中静态输出style标签? style-loader是动态渲染的，常规的做法就是extract-text-webpack-plugin和style-ext-html-webpack-plugin https://github.com/numical/st... 两个插件配合。

Answer 2

解决方法请参考（或请持续关注）：https://github.com/webpack-co...

补充

之前提出这个问题的原因是一直以为通过style-loader处理过的css会以style标签插入到打包后的html原文件里面——就像通过html-webpack-plugin处理后的html文件一样——打包后的源码中包含.js文件

晕倒，可能是自己误会了，虽然经过html-webpack-plugin插件处理过后的js文件会插入到html的body结束标签之前，但是经过style-loader处理过的css文件却不会插入过head（结束）标签之前——需要通过浏览器打开打包后的静态文件，然后f12才能看到head标签处的style相关样式。