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

您的项目需求