Webpack学习笔记(三)：管理资源

最新推荐文章于 2023-05-08 15:18:48 发布

左手一杯酒

最新推荐文章于 2023-05-08 15:18:48 发布

阅读量218

点赞数

分类专栏：前端文章标签： webpack 前端

本文链接：https://blog.csdn.net/u010154520/article/details/106469917

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Webpack学习笔记(三)：管理资源

目的

管理项目中CSS样式、图片、字体等资源,将他们和js文件一起通过webpack打包

实现方式

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。

webpack引入js文件之外的文件都是是通过loader实现的，例如引入CSS文件需要使用 style-loader 和 css-loader

实例

代码继承自搭建一个简单的webpack实例

CSS文件

1.引入对应loader

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

2.在webpack.config.js中添加rule
webpack根据config里面test中配置的正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。
在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader

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

3.添加一个css文件

.hello {
  color: red;
}

4.在index.js中引入css文件

import _ from 'lodash';
import './style.css';

function component() {
    var element = document.createElement('div');

    // lodash 是由当前 script 脚本 import 导入进来的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());