webpack学习笔记（七）—— 配置处理css样式表的第三方loader

通过link的方式引入css，会引发二次请求，不推荐这么用

改用import语法，导入css样式表

webpack默认只能打包处理 js类型的文件  无法处理其他的非js类型的文件

如果要处理非js类型的文件，需要手动安装一些合适的第三方loader加载器

1 处理css文件,需要下面两个loader

npm i style-loader css-loader -D

2 在webpack.config.js,新增配置节点module对象，在module兑现的rules（数组）属性，这个属性存放了所有第三方文件的匹配、处理规则

//这个配置文件，其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置对象
const path = require("path"); //node.js中的路径

const webpack = require("webpack"); //引入webpack
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  //手动指定入口和出口
  entry: path.join(__dirname, "./src/main.js"), //入口，表示要使用webpack打包哪个文件
  output: {
    //输出文件相关的配置
    path: path.join(__dirname, "./dist"), //指定打包好的文件，输出到哪个目录中去
    filename: "bundle.js" //这是指定输出的文件的名称
  },
  devServer: {
    open: true, //自动打开浏览器
    port: 3000, //设置运行端口
    contentBase: "src", //指定托管的根目录
    hot: true //启用热更新
  },
  plugins: [
    //配置插件的节点
    new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象
    new htmlWebpackPlugin({
      //创建一个在内存中生成HTML页面的插件
      template: path.join(__dirname, "./src/index.html"), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
      filename: "index.html" //指定生成的页面的名称
    })
  ],
  module: {
    //配置第三方模块的加载器
    rules: [
      //所有第三方的匹配规则
      {
        test: /\.css$/,
        use: ["style-loader",'css-loader'],//配置处理 css文件的第三方loader规则
      }
    ]
  }
};

less、sass的loader配置

1 安装

cnpm  i less-loader -D

cnpm i sass-loader node-loader -D

2 配置

module: {
    //配置第三方模块的加载器
    rules: [
      //所有第三方的匹配规则
      {
        test: /\.css$/,
        use: ["style-loader",'css-loader'],//配置处理 css文件的第三方loader规则
      },
      {
        test: /\.less$/,
        use: ["style-loader",'css-loader','less-loader'],//配置处理 css文件的第三方loader
      },
       {
        test: /\.scss$/,
        use: ["style-loader",'css-loader','sass-loader'],//配置处理 css文件的第三方loader
      }
    ]
  }

注

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

1 发现这个文件不是js文件，然后就去配置文件中查找有没有对应的第三方loader规则

2 如果能找到对应的规则，就会调用对应的loader处理这种文件类型

3 在调用loader的时候，是从后往前调用的      ["style-loader",'css-loader']先右后左

4当最后的一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最后输出到bundle.js中去