玖叶教程网

前端编程开发入门

Webpack基础应用篇 - 「8」管理资源

在上一章,我们讲解了四种资源模块引入外部资源。除了资源模块,我们还可以通过loader引入其他类型的文件。

1.6.1 什么是loader

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

在 webpack 的配置中,loader 有两个属性:

  1. test 属性,识别出哪些文件会被转换。
  2. use 属性,定义出在进行转换时,应该使用哪个 loader。
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:testuse。这告诉 webpack 编译器(compiler) 如下信息:

“嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时,在你对它打包之前,先 use(使用) raw-loader 转换一下。”

1.6.2 加载CSS

为了在 JavaScript 模块中 import 一个 CSS 文件,你需要安装 style-loader 和 css-loader,并在 f="https://webpack.docschina.org/configuration/module">module 配置 中添加这些 loader:

[felix] webpack5 $ npm install --save-dev style-loader css-loader

修改配置文件:

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

07-manage-assets/webpack.config.js

//...

module.exports = {
//...

// 配置资源文件
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-loadercss-loader

这使你可以在依赖于此样式的 js 文件中 import './style.css'。现在,在此模块执行过程中,含有 CSS 字符串的 <style> 标签,将被插入到 html 文件的 <head> 中。

我们尝试一下,通过在项目中添加一个新的 style.css 文件,并将其 import 到我们的 index.js 中:

07-manage-assets/src/style.css

.hello {
	color: #f9efd4;
}

在入口文件里导入 .css文件:

import './style.css'

document.body.classList.add('hello')

07-manage-assets/src/index.js

// 导入函数模块
//...
import './style.css'

//...

document.body.classList.add('hello')

启动服务,打开浏览器:

[felix] 07-manage-assets $ npx webpack serve --open

你应该看到页面背景颜色是浅黄色。要查看 webpack 做了什么,请检查页面(不要查看页面源代码,它不会显示结果,因为 <style> 标签是由 JavaScript 动态创建的),并查看页面的 head 标签,包含 style 块元素,也就是我们在 index.js 中 import 的 css 文件中的样式。

现有的 loader 可以支持任何你可以想到的 CSS 风格 - sass 和 less 等。安装less-loader:

[felix] webpack5 $ npm install less less-loader --save-dev

修改配置文件:

module: {
    rules: [
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
      }
    ],
  },

07-manage-assets/webpack.config.js

//...

module.exports = {
//...

// 配置资源文件
module: {
 rules: [
     //...

     {
       test: /\.less$/i,
   use: ['style-loader', 'css-loader', 'less-loader'],
     },

 //...
   ],
},

//...
}

在项目src目录下创建 style.less文件:

@color: red;
.world {
  color: @color;
}

在入口文件中引入 .less 文件:

import './style.less'

document.body.classList.add('world')

07-manage-assets/src/index.js

// 导入模块
//...
import './style.less'

//...

document.body.classList.add('world')

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言