css loader注意！必须使用两个加载器来转换CSS文件。CSS-loader用来读取CSS文件来转换，另一个Sty

webpack cssloader

Webpack允许在JS文件中包含CSS，需要CSS-loader对这些CSS进行处理
main.js

require('./app.css');
复制代码

app.css

body {
  background-color: blue;
}
复制代码

index.html

<html>
  <head>
    <script type="text/javascript" src="bundle.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
复制代码

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
    ]
  }
};
复制代码

注意！必须使用两个加载器来转换CSS文件。CSS-loader用来读取CSS文件来转换，另一个Style-loader用来往HTML中插入<style>标签。
然后打开server

$ cd demo04
$ npm run dev
复制代码

事实上，Webpack将CSS文件的内容直接插入到index.html

<head>
  <script type="text/javascript" src="bundle.js"></script>
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>

原文链接：https://juejin.cn/post/6844903635474710541
其实将app.css文件内容通过css loader解析之后，

然后通过style loader插入到html文件之中，

最后打包完的文件，只有html和js文件，

bundle.js里面包含写style标签和写入样式内容