HTML 文件路径

径描述

<img src="picture.jpg">

picture.jpg 位于与当前网页相同的文件夹

<img src="images/picture.jpg">

picture.jpg 位于当前文件夹的 images 文件夹中

<img src="/images/picture.jpg">

picture.jpg 当前站点根目录的 images 文件夹中

<img src="../picture.jpg">

picture.jpg 位于当前文件夹的上一级文件夹中

HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

网页
图像
样式表
JavaScript

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL：

实例

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 等。

兴趣的朋友，看过来，用手机一分钟做出属于自己的网页。

1.下载一个文本编辑器软件，比如“超卓文本编辑器”。当然，如果你手机已经有文本编辑器，那就不用再下载了。

2.打开手机文件管理中的手机存储，新建文件夹，名字写“HTML”；这个文件夹一会用来保存你的网页。

3.打开编辑器，复制粘贴以下代码：<html>

<head>

<title>

这是我的网页

</title>

</head>

<body>

这是我做的第一个网页，真开心！

</body>

</html>

保存文件到刚刚建的“HTML”文件夹里，文件名字取“index.html”。

4.去手机存储里，找到并打开“HTML”文件夹，点击里面的“index.html”文件，你就能看到以下效果

5.接下来，我们讲解一下上面的代码：

<我是标签>，被<>这个符号包起来的叫做标签，把网页比作一堵墙的话，那这标签就是一块块的砖。

上面的标签都是成对的，有开始就有结束，比如<html></html>。当然，也存在单个体的标签，它们从一出生就被定义孤独终老。

<html> 标签代表着整个网页，所有内容都写在它里面。

<head> 标签代表着头部，用来声明一些代码。

<title> 标签代表这个页面的标题，就是浏览器显示网址的那个位置。

<body> 标签代表着身体，网页的所有正文内容，都被它容纳。

6.为什么该文件取名为“index.html”呢？

其实，取什么名字都可以（强调用英文）。

不过，后缀一定要写成“htm”或“html”，只有这样，浏览器才能识别得出这是一个网页文件。

7.堂课总结：

① 下载安装文本编辑器

② 新建文件夹，名字随意取（英文名）

③ 复制粘贴代码并保存，后缀写成“html”

期待下节课还能见到你们！

在线咨询

上一篇：JavaScript奇淫技巧：用密码保护你的照片
下一篇：办公软件支持批量转换PDF、HTML、TXT，PDF编辑器专家的PDF软件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 文件路径

HTML 文件路径

绝对文件路径

初始化示例工程

加载 CSS

您的项目需求