webpack 之 loader

loader简介

　　loader在webpack.config.js中进行配置，配置之后，会自动检测打包过程中引入的文件（import或require），通过test成功匹配被引入的文件名后，会对文件内容进行编译处理，处理后再引入对应的编译后的内容。

babel-loader

使用babel-loader来对es6代码进行转换，首先下载相关的文件（对于babel，可以参考这里）

npm install --save-dev babel-core babel-loader babel-preset-es2015

然后启用loader：

module.exports = {
    entry:  [__dirname + "/main.js"],
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
    },
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015"]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

main.js:

require('./index');

index.js:

class Person {
    constructor( name ) {
        this.name = name;
    }
    sayHello() {
        return `Hello ${ this.name }!`;
    }
    sayHelloThreeTimes() {
        let hello = this.sayHello();
        console.log(`${ hello } `.repeat(3));
    }
}
new Person('ben').sayHelloThreeTimes()

打包后的文件，就已经是被转换后的代码了

file-loader

https://github.com/webpack-contrib/file-loader

　　以某种规则移动和重命名文件，然后返回文件的新地址。在vue单文件中的style标签内通过src指定的图片也会被webpack打包处理，可以通过file-loader来处理

　　默认情况下(仅仅使用loader而不做其他任何配置)会以文件的摘要来重命名图片，移动到output.path目录下，返回的地址是相对于output.path的。ps：文档中提到这个loader的option.publicPath 的默认值就是 __webpack_public_path__，而这个__webpack_public_path__就是通过output.publicPath来配置的

　　如果指定了output.publicPath的话，则输出的地址会多一个前缀，即新url = output.publicPath + 原url，文件移动的地址没有发生变化。可以通过options.outputPath来指定输出文件在output.path目录中的位置。

url-loader

类似file-loader，当文件小于某个值时，返回文件的base64 url，如果大于，则和file-loader一样返回文件的对外地址。