理解webpack中loader的套路

【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。

loader的使用很简单：

在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。
1.先在文件根目录下配置相应的loader文件，生成的package文件 内容如下，可以看到loader的版本

2.在根目录下新建一个webpack.config.js的文件

const HtmlWebpackPlugin=require("html-webpack-plugin")//引用插件
const extractTextWebpackplugin=require("extract-text-webpack-plugin");
module.exports={
    entry:{
        index:"./src/index.js"
    },
    mode:"development",
    module:{
        rules:[
            {
                test:/.css$/,//以.css结尾的文件
                use:extractTextWebpackplugin.extract({
                  fallback: 'style-loader',
                  use: 'css-loader',
                })
               
            },
            {
                test:/.less$/,//以.less结尾的文件
                use:extractTextWebpackplugin.extract({
                  fallback: 'style-loader',
                  use: ['css-loader','less-loader'],
                  //先处理的放在数组的后面，
                  //loader的处理过程中会从数组的最后一层一层往上传
                })
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',//输出成index.html文件
        }),
        new extractTextWebpackplugin("style.css")//提取文字到style.css
    ]
}

本文地址：https://blog.csdn.net/qq_44685099/article/details/107210853