官网

1.简介

用于模块的源代码转换，它可以在import和load模块时进行预处理。

const path = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;

在更高层面，在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

2.打包css

2.1安装

在根路径文件中执行安装下载操作

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

2.1配置

webpack.config.js文件

const path=require("path")
module.exports={
    //入口文件,入口文件的路径
    entry:"./src/index.js",
    //输出
    output:{
     //输出文件名称
     filename:"bundle.js",
     //输出路径，这里需要绝对路径
     //这里相当于 D:\下载\webpacjks\webpack与\dist拼接
     path:path.resolve(__dirname,'dist')
    },
    //开发模式,这里还可以时production生产模式
   mode:'development',
   //loader的配置
   module:{
//对某种格式的文件进行转换的处理
rules:[
    {
        //匹配规则，得用正则表达式，这里是匹配后缀名
        test:/\.css$/,
        use:[
            //先将css文本的格式用style标签插进html中，在进行css渲染
            //将js的样式插入style标签中
            //数组中解析的顺序是从下到上的顺序，逆序执行
            "style-loader",
            //将css转化为js
            "css-loader"
        ]
    }
]
   }
}

2.3输出命令

webpack