当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 理解webpack中loader的套路

理解webpack中loader的套路

2020年07月09日  | 移动技术网IT编程  | 我要评论

【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/',//输出成文件
        }),
        new extractTextWebpackplugin("style.css")//提取文字到style.css
    ]
}

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网