webpack5的loader配置小白学习篇

yizhihongxing

一、什么是Webpack Loader

Webpack是一个模块打包工具,可以将各种资源文件(JS、CSS、图片等)打包成网页中的静态资源。但是Webpack只认识JS文件,如果我们直接把CSS文件或图片文件引入到JS文件中,Webpack就会报错。这时就需要使用Webpack Loader,将Webpack不认识的文件转化成Webpack能够识别的模块。

二、Loader的作用

Webpack Loader的作用是对特定类型的资源文件进行转换,使它们能够被Webpack打包。具体来说,Loader会读取指定文件的内容,将其转换为Javascript代码,然后将其作为一个模块输出给Webpack。

三、Loader使用方法

1.安装Loader,如需要使用CSS Loader和SASS Loader,可输入以下命令进行安装:

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

其中,css-loader将CSS文件打包成JavaScript模块;style-loader将CSS样式插入到HTML中的