webpack处理样式资源基础使用

介绍

webpack本不能识别样式资源，需要借助各种loader帮助webpack解析样式资源

CSS

webpack loaders官网

以下内容官网都有！！！

• 安装css-loader

npm install --save-dev css-loader
npm install style-loader --save-dev

• 配置webpack.config.js

//加载器：
module: {
    rules: [
        {
            test: /.css$/, //只检测.css文件
            //执行孙旭，从右→左，或者从下->上
            use: [ 'style-loader',  //将js中css通过创建style标签添加到html文件中生效
                'css-loader' //将css资源编译成common.js的模块到js中
            ]

        }
    ]
},

• 运行指令

npx webpack

通过main.js引入css样式文件，样式会被加入到style标签中

less

• 安装

npm install --save-dev less-loader less

• 配置

   module: {
        rules: [{
            test: /.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }

less文件：

.box2 {
  width: 100px;
  height: 100px;
  background: blue;

  p {
    color: bisque;
  }
}

less编译结果截图

Sass和Scss资源

• 安装

npm i sass-loader sass -D

• 配置

  module: {
    rules: [{
      test: /.scss$/,
      use: [{
          loader: "style-loader" //将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" //将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" //将 Sass 编译成 CSS
      }]
    }]
  }

总结：通过安装不同的loader实现对不同文件类型打包处理。都是基于style-loader和css-loader这两个loader，loader执行顺序从右到左，从上到下

笔记整理，欢迎指错，菜鸟一只