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

巴特西

webpack 之 loader

loader简介

babel-loader

file-loader

url-loader

最新文章

热门文章