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

相關標籤/搜索