css loader

时间 2019-11-08

标签 css loader 栏目 CSS 繁體版

原文原文链接

webpack cssloaderjavascript

Webpack容许在JS文件中包含CSS，须要CSS-loader对这些CSS进行处理
main.jscss

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

app.csshtml

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

index.htmljava

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

webpack.config.jswebpack

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>标签。
而后打开serverweb

$ cd demo04
$ npm run dev
复制代码复制代码

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

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

原文连接：https://juejin.im/post/5b42d4dce51d45195c070cd0
其实将app.css文件内容经过css loader解析以后，

而后经过style loader插入到html文件之中，bash

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

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