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一样返回文件的对外地址。

 

posted @ 2017-11-07 17:07  HelloHello233  阅读(413)  评论(0编辑  收藏  举报