0
点赞
收藏
分享

微信扫一扫

39-1. Webpack - CSS loader 的 配置

39-1. Webpack -  CSS loader 的 配置_css

新建一个s1.css  里面让body背景颜色显红色,那么就要打包一起生效,打包因为有入口js,所以我们就要在入口js添加依赖,然后加载用到loader 我们用npm安装css-loader,最后嵌入DOM显示 要用到 style-loader,这里的顺序肯定是 先  css-loader  后 style-loader 的。

1.入口js中 添加 s1.css 的 依赖

//我们在这里导入一下数据:
const math = require('./mathUtils.js')

console.log(math.add(10,20));
console.log(math.mul(10,20));

-----------------------------------------------------------主要是下面这句:

//导入(引用)s1.css的数据/依赖
require('./css/s1.css')

2.安装 css-loader 以及 style-loader

npm install --save-dev css-loader

npm install --save-dev style-loader

39-1. Webpack -  CSS loader 的 配置_css_02

安装完两个loader后 我们需要复制框内那个module到webpack.config.js文件中【往出口里面放】:

39-1. Webpack -  CSS loader 的 配置_css_0339-1. Webpack -  CSS loader 的 配置_加载_04

const path = require('path')        //请先执行 npm init   先安装NODE一些相关东西

module.exports = {
    //入口: 可以是字符串、数组、对象,这里我们入口只有一个,所以写一个字符串即可
    entry:'./src/main.js',
    //出口,通常是一个对象,path是路径(绝对路径),filename是导出的文件名
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
     module: {
        rules: [
          {
            test: /\.css$/i,    //这个是正则表达式 说明凡是.css结尾的文件
            use: ["style-loader", "css-loader"],    //可以看到有两个 我们都安装了,其次顺序也说过是 先css-loader后style-loader,在使用多个loade的时,加载是从右到左的,也完美诠释了先css后style了.
          },
        ],
       }
}

webpack.config.js

注意看注释

 

最后我们执行打包即可:

 

失败了  待续更新...

报错:

TypeError: this.getOptions is not a function

 

解决:”版本过高 降低loader的版本 我成功了

 39-1. Webpack -  CSS loader 的 配置_css_05

 

 按照这个版本 重新安装 @后面加版本


作者:咸瑜​


举报

相关推荐

0 条评论