这里webpack常识,问题,解决方法,实现方法
image.png
一.webpack常识
所有需要在html文件中导入的外界依赖文件,如果使用webpack打包工具之后,都要在webpack的默认入口文件,项目文件夹下的index.js文件中导入,然后编译成浏览器可识别的低级语法main.js文件
二.问题
默认情况下webpack只能识别js导入的js文件,如jquery.js,但是不能识别css/less/images等其他类型的文件
三.解决方法
为了解决这个问题,给webpack添加了许多第三方插件,叫loader(加载器,能够将一种文件转换为另一种文件,这里将webpack不能识别的文件转换为可识别的js文件),会将webpack不能识别的其它类型文件转换为webpack可识别js类型文件,然后编译成main.js
四.打包css文件解决方法
- 安装css-loader和style-loader
npm i style-loader css-loader -D - 在webpack.config.js中配置loader
module:{
rules:[
{test:/.css$/,use:['style-loader','css-loader']},
{loader规则}
]}
在module属性的rule属性中配置loader规则.这里的含义是匹配所有.css结尾的文件,利用style-loader和css-loader加载器进行转换后再编译
image.png
image.png
image.png
loader区别于plugin,不需要导入
