webpack处理样式资源

初步配置

处理CSS资源
1.下载css-loader：

npm i css-loader style-loader -D

2.入口文件main.js中引入css资源：

3.webpack.config.js加入loader的配置项：

const path = require("path");

module.exports={
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"dist"), 
        filename:"main.js",
    },
    module:{
        rules:[
            //loader的配置
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            }
        ]
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    mode:"development"
}

运行一个页面，只引入打包后的JS文件，也会加载出CSS资源：

分析：
经过loader的处理，最终以新增style标签的形式完成了css资源的加载。
实际上，loader的use配置项是从后往前使用执行的：
先使用css-loader 将css资源编译成commonjs模块到 js 中
然后通过style-loader 创建style标签添加到html文件中生效。

处理Less资源
1.如法炮制，下载安装less 和 less-loader

npm i less less-loader -D

2.rules中对less添加配置项

      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader', //将less编译成css
        ],
      },

3.完成less样式书写并引入

处理Sass和Scss
1.安装sass和sass-loader

npm i sass sass-loader -D

2.rules中添加配置项

{
	test: /\.s[ac]ss$/i,
	use: [
	'style-loader',
    'css-loader',
    'sass-loader',
    ],
},

3.完成sass样式书写并引入

处理Stylus
1.安装stylus 和 stylus-loader

npm i style-loader -D

2.配置rules

{
        test: /\.styl$/,
        loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
},

3.书写styl文件,完成stylus样式书写并引入

使用OneOf

如果存在多种样式的css资源，那么这些rules配置项会累在一起，webpack处理每个资源时会依次遍历匹配你所写的所有文件名后缀规则。

这个时候可以使用oneOf进行提升匹配速度，即每个文件只能被一个loader配置，已经匹配上了规则就切换对下一个资源的配置。

所以推荐的基础配置文件如下：

const path = require("path");

module.exports={
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"dist"), 
        filename:"main.js",
    },
    module:{
        rules:[
            {
                oneOf:[
                    {
                        test: /\.css$/i,
                        use: ["style-loader", "css-loader"],
                    },
                    {
                        test: /\.less$/i,
                        use: [
                          'style-loader',
                          'css-loader',
                          'less-loader', 
                        ],
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: [
                          'style-loader',
                          'css-loader',
                          'sass-loader',
                        ],
                    },
                ]
            }
        ]
    },
    plugins:[
        // plugin的配置
    ],
    mode:"development"
}