Webpack基础应用篇 – [8]管理资源

1.6.1 什么是loader
 
webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
 
在 webpack 的配置中,loader 有两个属性:
 
test 属性,识别出哪些文件会被转换。
 
use 属性,定义出在进行转换时,应该使用哪个 loader。
 
const path = require(‘path’);
 
module.exports = {
 
  output: {
 
    filename: ‘my-first-webpack.bundle.js’,
 
  },
 
  module: {
 
    rules: [{ test: /\.txt$/, use: ‘raw-loader’ }],
 
  },
 
};
 
以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use。这告诉 webpack 编译器(compiler) 如下信息:
 
“嘿,webpack 编译器,当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时,在你对它打包之前,先 use(使用) raw-loader 转换一下。”
 
1.6.2 加载CSS
 
为了在 JavaScript 模块中 import 一个 CSS 文件,你需要安装 style-loader 和 css-loader,并在 module 配置 中添加这些 loader:
 
[felix] webpack5 $ npm install –save-dev style-loader css-loader
 
1
 
修改配置文件:
 
  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-loader 和 css-loader。
 
这使你可以在依赖于此样式的 js 文件中 import ‘./style.css’。现在,在此模块执行过程中,含有 CSS 字符串的 <style> 标签,将被插入到 html 文件的 <head> 中。
 
我们尝试一下,通过在项目中添加一个新的 style.css 文件,并将其 import 到我们的 index.js 中:

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64280.shtml

张贴在3