webpack loader

标签：babel   别人   添加   webpack   内容   nbsp   load   path   pac   

我们在用别人的脚手架的时候,总会见到loader

用vue的时候   可能用到vue-loader

引入css  可能用到css-loader

处理小图片 为了减少请求次数   将图片转为base64字符串   用到url-loader

处理es6  用到babel-loader

loader的安装和使用

先通过npm安装loader   引入package.json

更改webpack.config.js文件   loader放在rules这个数组里面

module.exports = {
    entry: ‘./src/script/main.js‘,
    output: {
        path: __dirname + ‘/dist/js‘,
        filename: ‘bundle.js‘
    },
    module: {
        rules: [
            // loader放在这个数组里
        ]
    }
}

将loader添加到上面数组里   并进行配置,

loader作用

对模块的源代码进行转换

例如输入一个css文件,拿到后是一个字符串,进行处理  再返回处理后内容作为css文件

loader匹配方式

webpack从入口文件开始解析代码   遇见es6的inport 或者require语法  导入相应的模块

每次加载一个新模块时, 就会触发能匹配成功的loader(比如 test: /\.css$/)会匹配成功.css结尾的文件,然后模块被该loader所处理

webpack loader

标签：babel   别人   添加   webpack   内容   nbsp   load   path   pac   

原文地址：https://www.cnblogs.com/icelolo/p/13222837.html