webpack学习第一天日志-1

ERROR in ./src/css/style.css 1:2
Module parse failed: Unexpected token (1:2)
You may need an appropriate loader to handle this file type.
> li{
| list-style: none;
| }
@ ./src/main.js 2:0-24
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/main.js

 

在入口的js文件中引入css样式文件时报错

原因:webpack默认只能处理js类型的文件,不能处理css类型的文件,如果要处理,必须要安装第三方的加载器

以本例为例,需要安装 两个加载器

处理方法

1、npm i style-loader css-loader -D

2、在webpack.config.js这个配置文件里面新增配置节点,module这个对象,把内部的rules属性的数组中存放所有第三方的匹配和规则

const path = require('path')
module.exports={
    mode:"development",
    entry:path.join(__dirname,"./src/main.js"),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    module:{//用户配置第三方的模块加载器
        rules:[//匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
}

 

白发渔樵

白发渔樵

发表评论

电子邮件地址不会被公开。 必填项已用*标注