webpack 打包处理其他类型的文件（以 .css .less .scss为例）

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83216526

webpack 处理第三方文件类型的过程：

1. 发现这个要处理的文件不是 js 文件，然后就去配置文件中，查找有没有对应的第三方 loader 规则
2. 如果能找到对应的规则，就会调用对应 loader 处理这种文件
3. 在调用 loader 时候，是从后往前调用的
4. 当最后一个 loader 调用完毕，会把处理结果，直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去

1.在 main.js 文件中引入 css 文件 index.css

//这个 main.js 是我们项目的 JS 入口文件

// 1.导入 JQuery
// import *** from *** 是 ES6 中导入模块的方式
// 由于 ES6 的代码太高级了，浏览器解析不了，所以这一行代码报错
// 一般 js 模块用这样的引入
import $ from 'jquery';

// 非 js 使用 import 语法，导入样式表
import './css/index.css';
import './css/index.less';
import './css/index.scss';

样式表

/* css */
li{
    list-style: none;
}

/* less */
ul{
  padding: 0;
  margin: 0;
}

/* scss */
html,body{
  margin: 0;
  padding: 0;
  li{
    font-size: 16px;
    line-height: 20px;
  }
}

2.安装一些合适的第三方 loader 加载器

对于css文件合适安装命令：npm i style-loader css-loader -d
对于less文件合适安装命名：npm i less-loader less -d
对于scss文件合适安装命名：npm i sass-loader node-sass -d（ 看清引入的是 sass ）

注意：npm 安装不下来的用 cnpm 下载

3.配置第三方加载器

• 打开 webpack.config.js 这个配置文件，在 module.exports 下面新增一个配置节点，叫做 module，它是一个对象；
• 在这个对象身上，有个 rules 属性，这个属性是个数组，存放了所有第三方的匹配和处理规则；

    module: {
        // 这个节点用于配置所有第三方模块加载器
        rules: [
            // 所有第三方匹配规则
            // 配置处理 .css 文件的第三方规则
            { test:/\.css$/, use:['style-loader','css-loader'] }
            // 调用顺序，从右到左，即先 css-loader 再 style-loader

			// 配置处理 .less 文件的第三方 loader 规则
            { test:/\.less$/, use:['style-loader','css-loader','less-loader']},

            // 配置处理 .scss 文件的第三方 loader 规则
            { test:/\.scss$/, use:['style-loader','css-loader','sass-loader']}
        ]
    }

最后，命令行中重新跑：npm run dev ，查看对于项目页面，样式已经改变