webpack中的style-loader css-loader用法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hjh15827475896/article/details/86228967

webpack 默认是可以找包js文件的，当要打包 css的时候 就需要引入 style-loader  和 css-loader

css-loader 的作用是把 css文件进行转码    而 style-loader 的作用是把转码后的css文件插入到相应的 文件中去

所以两者使用的时候是一起使用的缺一不可并且有先后顺序的  要先使用 css-loader 转码，然后再使用 style-loader插入到文件中去安装使用

1安装css-loader 和 style-loader

命令行  npm install --save-dev css-loader style-loader

2.在webpack.config.js中进行配置

let path = require("path");

module.exports = {
    mode:"production",
    entry:{
        app:'./app.js'
    },
    
    output:{
        path:path.resolve(__dirname,"./bundle/"),
        filename:'[name].bundel.[hash5].js',
    },
    

    //说明： 这里的 style-loader 和 css-loader 的顺序是不能写反的 use的时候是从后向前use的，所以会先使用 css-loader转换，再使用 style-loader 插入
    module:{
        rules:[
            test:/\.css$/,
            use:[
                {
                    loader:"style-loader",
                },{
                    loader:"css-loader",
                    options:{
                        minimize:true,  // 对css代码进行压缩   options选项可以不要
                    }
                }
            ]
        ]
    }

}

3.在打包的入口文件中 引入所与的css文件

即在 app.js中

import "./src/css/demo.css";这样在打包时 webpack就是自动去加载相应的css文件了

还有 style-loader/url   和 style-loader/useable的用法，自行百度