webpack学习-2.管理资源

webpack学习-2.管理资源

1.这章要干嘛

管理资源,什么意思呢?管理什么资源?项目中经常会
导入各种各样的css文件,图片文件,字体文件,数据文件等等,不经过处理的话,浏览器是不一定能识别的。所以,这章就来试试效果主要是。

2.加载css

要想在 JavaScript 模块中导入 CSS 文件,需要安装 style-loader 和 css-loader,并在 module 配置 中添加这些 loader:

npm install --save-dev style-loader css-loader

webpack.config.js

 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'],
      },
    ],
  },
 };

注意顺序!

module loader 可以链式调用。链中的每个 loader 都将对资源进行转换,不过链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。

请确保 loader 的先后顺序:‘style-loader’ 在前,而 ‘css-loader’ 在后。如果不遵守此约定,webpack 可能会抛出错误。
其他按官网步骤来,没问题

3.总结

按官网例子完成截图
在这里插入图片描述
用官网的来总结吧这次

上述所有内容中最出色之处在于,以这种方式加载资源,可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录,而是将资源与代码组合在一起使用。

就是如果要在js模块中引入各种资源文件,就要在webpack配置文件中配置对应的loader和npm对应的包。

相关推荐

  1. Webpack】处理样式资源

    2023-12-06 07:44:08       33 阅读
  2. Webpack】处理 js 资源

    2023-12-06 07:44:08       35 阅读
  3. Webpack】处理图片资源

    2023-12-06 07:44:08       29 阅读
  4. Webpack资源输入输出 - 配置资源出口

    2023-12-06 07:44:08       32 阅读
  5. webpack学习

    2023-12-06 07:44:08       8 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-06 07:44:08       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-06 07:44:08       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-06 07:44:08       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-06 07:44:08       20 阅读

热门阅读

  1. vue优化的方法

    2023-12-06 07:44:08       38 阅读
  2. 记录一次登录相关bug

    2023-12-06 07:44:08       36 阅读
  3. python遇到bug问题汇总

    2023-12-06 07:44:08       36 阅读
  4. 华纳云:android中listview数据动态加载的方法

    2023-12-06 07:44:08       35 阅读
  5. MacOS 14挂载NTFS 硬盘的最佳方式(免费)

    2023-12-06 07:44:08       78 阅读