当先锋百科网

首页 1 2 3 4 5 6 7

webpack处理css资源

1.webpack是不能直接识别css资源的，一定要通过loader资源来帮助webpack解析样式资源

2.例如在src文件夹下建立一个css文件夹，写入index.css文件

.box{
    background-color: aqua;
}

然后在mian.js文件当中引入文件，然后npx webpack

会发现会报错以下信息

那么说明其中webpack就不能解析相应的css资源了，那么这个时候就需要进行特殊的配置，让系统对其进行处理

首先进行依赖包下载：

安装包依赖

npm i css-loader style-loader -D

 注意：需要下载两个 loader

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
  • 记住在这里是先执行style-loader，再执行css-loader的
  • 此时样式就会以 Style 标签的形式在页面上生效

webpack.config.js文件要配置以下信息：

const path=require('path')
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"main.js"
    },
    // 加载器
    module:{
        rules:[
            {
                test:/\.css$/,    //在这里表示处理所有以css结尾的文件
                //在这里是先执行css-loader，再执行style-loader的
                use:["style-loader","css-loader"]
            }
        ]
    },
    plugins:[],
    mode:"development",
}

最后打包css文件资源（npx webpack），最后会生成一个dist文件夹下的css代码，这时候再引用代码

public/index.html代码

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>

那么要展示的页面效果就可以进行展示啦