webpack- loader 基础使用(关于css文件加载)

webpack 本身是用来转换js代码进行打包的;但很多其他文件,如css文件不支持依赖; 需要这时候需要用到loader

loader的使用

在main入口中引用css文件;是无法直接打包的

loader 的安装
采用官网的方式: npm install --save-dev css-loader

装成功后会显示这样

loader 配置
在 webpack,config.js 文件中配置module中的规则; 如下图

    module: {
        rules: [
            {
                test: /\.css$/,
                use:['css-loader']
            }
        ]
    }

最后,再次使用打包命令 webpack 就可以打包成功
然后,打包之后,发现; ??? 页面还是没有显示css样式; ???

查询官网后,能够看到, css-loader 只负责将css文件加载到包中,但不能渲染, 渲染到dom层的话 还需要安装 style-loader 模块

安装style-loader 的方法和上面类似;运行 npm install --save-dev style-loader 即可;之后在module的规则中添加loader
(注意: loader的加载是从右向左,从后向前的)

安装后,再次打包,就可以加载css文件啦!!!