webpack（四）-css的加載

先要安裝css的loader

npm install css-loader style-loader --save-dev

然后在webpack.config.js中配置如下代碼

意思是先用css-loader加載css文件，再用style-loader添加在頁面中

在app目錄下創建component.css文件

body{
 background-color: red;
}

在app/index.js中引入css文件

運行npm run start命令。

可以看到我們瀏覽器整個背景都變成了紅色。

webpack做了什么呢？

看到build/app.js中有如下代碼。

再看下我們生產的index.html文件

奇怪了，并沒有內斂樣式也沒有引入的css文件，那瀏覽器是為什么變紅的呢？

我們在瀏覽器中打開調試工具。

原來樣式在這！

webpack動態的添加了內斂樣式在代碼中。

如果多人協作開發的情況下，會有很大可能出現代碼命名重復的情況，如果出現這種情況怎么辦呢？

來讓我們試驗一下。

在app目錄下添加兩個css文件，style1.css

body{
 background-color: red;
}.class1{
color: green;
}

和style2.css

body{
 background-color: black;
}.class1{
 color: blue;
}

在index.js中引入這兩個文件

修改component.js文件，使其給元素添加傳入的類名

在webpack.config.js中添加如下配置

我們執行npm run start 命令若看到

即為打包成功。

打開瀏覽器http://localhost:8080/

可以看到同樣的類名都正常顯示出來了，看下右邊的文檔結構，發現我們的類名不是class1了。

原來CSS Modules對我們的類名做了哈希處理，我們再也不用擔心同事跟我們有相同的命名了。

是不是很方便呢？

讓我們再來面對另一個問題，現在這種情況下css是js動態添加上去的，如果當js文件有一個長時間的阻塞事件，頁面將會處于長時間的無樣式的狀態。

這是我們不希望看到的，怎么把css文件和js文件分離呢？

首先我們需要安裝一個插件

npm install extract-text-webpack-plugin --save-dev

安裝成功之后在webpack.config.js中添加如下配置

完成之后運行一下npm run start

打開瀏覽器http://localhost:8080/

可以看到我們兩個css文件合并為一個app.css文件并以外部樣式表的形式加載。

而且css文件比js文件要先請求，這樣就避免頁面會出現FOUC-Flas Of Unstyle Content無樣式內容閃爍。

webpack關于css的加載就講到這里。

天在調試android webview加載本地html文件時，對三種不同位置html的加載方式總結如下：

1.//打開本包內asset目錄下的index.html文件

wView.loadUrl(" file:///android_asset/index.html ");

2.//打開本地sd卡內的index.html文件

wView.loadUrl("content://com.android.htmlfileprovider/sdcard/index.html");

3.//打開指定URL的html文件

wView.loadUrl(" http://m.oschina.net");

今天就分享這一個知識點，祝大家好運！

webpack 出現之前，前端開發人員會使用 grunt 和 gulp 等工具來處理資源，并將它們從 /src 文件夾移動到 /dist 或 /build 目錄中。JavaScript 模塊也遵循同樣方式，但是，像 webpack 這樣的工具，將動態打包所有依賴（創建所謂的依賴圖(dependency graph)）。這是極好的創舉，因為現在每個模塊都可以明確表述它自身的依賴，可以避免打包未使用的模塊。

webpack 最出色的功能之一就是，除了引入 JavaScript，還可以通過 loader 或內置的 Asset Modules 引入任何其他類型的文件。也就是說，以上列出的那些 JavaScript 的優點（例如顯式依賴），同樣可以用來構建 web 站點或 web 應用程序中的所有非 JavaScript 內容。讓我們從 CSS 開始起步，或許你可能已經熟悉了下面這些設置。

初始化示例工程

首先我們創建一個目錄webpack-css，用npm初始化，然后在本地安裝 webpack：

mkdir webpack-css
cd webpack-css
npm init -y
npm install webpack webpack-cli --save-dev

目錄結構、文件和內容如下：

  webpack-css
 |- package.json
 |- /dist
   |- index.html
 |-webpack.config.js

其中dist/index.html文件內容為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 資源管理</title>
    <script src="bundle.js"></script>
</head>
<body>
      <div class="css_demo">css 資源管理</div>
</body>
</html>

webpack.config.js的文件內容如下：

 const path=require('path');
 module.exports={
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
   },
 };

package.js的文件內容如下：

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0"
  }
}

加載 CSS

為了在 JavaScript 模塊中 import 一個 CSS 文件，你需要安裝 style-loader 和 css-loader，并在 module 配置中添加這些 loader：

npm install --save-dev style-loader css-loader

修改webpack.config.js添加加載CSS：

const path=require('path')

module.exports={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

模塊 loader 可以鏈式調用。鏈中的每個 loader 都將對資源進行轉換。鏈會按逆序執行。第一個 loader 將其結果（被轉換后的資源）傳遞給下一個 loader，依此類推。最后，webpack 期望鏈中的最后的 loader 返回 JavaScript。

應保證 loader 的先后順序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此約定，webpack 可能會拋出錯誤。

webpack 根據正則表達式，來確定應該查找哪些文件，并將其提供給指定的 loader。在這個示例中，所有以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader。

這使你可以在依賴于此樣式的 js 文件中使用 import './style.css'。現在，在此模塊執行過程中，含有 CSS 字符串的 <style> 標簽，將被插入到 html 文件的 <head> 中。

我們嘗試一下，通過在項目中添加一個新的 style.css 文件，并將其 import 到我們的 index.js 中。

在src的目錄下創建 style.css 文件，src/style.css文件內容如下：

.css_demo {
  color: red;
}

在src/index.js的文件中引入style.css：

import './style.css'

執行打包命令

npm run build

> webpack-css@1.0.0 build D:\project\mockjs\webpack-css
> webpack

asset bundle.js 3.58 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 8.9 KiB
  modules by path ./src/ 679 bytes
    ./src/index.js + 1 modules 346 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 333 bytes [built] [code generated]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 1573 ms

再次在瀏覽器中打開 dist/index.html，你應該看到 css 資源管理現在的樣式是紅色。要查看 webpack 做了什么，請檢查頁面（不要查看頁面源代碼，它不會顯示結果，因為 <style> 標簽是由 JavaScript 動態創建的），并查看頁面的 head 標簽。它應該包含 style 塊元素，也就是我們在 index.js 中 import 的 css 文件中的樣式。

效果

注意，在多數情況下，你也可以進行壓縮 CSS，以便在生產環境中節省加載時間。最重要的是，現有的 loader 可以支持任何你可以想到的 CSS 風格 - postcss, sass 和 less 等。

在線咨詢

上一篇：四川考生必讀！教你看懂分段統計表
下一篇：Edge瀏覽器播放視頻有白邊或黑邊是怎么回事？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

webpack（四）-css的加載

初始化示例工程

加載 CSS

您的項目需求