Webpack基础应用篇8管理资源

　　在上一章，我们讲解了四种资源模块引入外部资源。除了资源模块，我们还可以通过loader引入其他类型的文件。 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，并在  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-loader   和  css-loader  。
　　这使你可以在依赖于此样式的 js 文件中  import ＂./style.css＂  。现在，在此模块执行过程中，含有 CSS 字符串的     标签，将被插入到 html 文件的     中。
　　我们尝试一下，通过在项目中添加一个新的  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 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为     标签是由 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＂)