zoukankan      html  css  js  c++  java
  • 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一样返回文件的对外地址。

  • 相关阅读:
    linux下安装mysql
    简单理解:使用linux的ip地址访问Java项目
    上传项目到github完整步骤及如何删除项目
    解决service iptables save出错please try to use systemctl.
    PCI1255信号采集板卡的干扰来源和解决办法
    L298N驱动的再利用
    千里狼-高速采集相机试用记录
    调试研华PCI1245E记录
    超大型的迷宫
    labview实现模拟python微信模块
  • 原文地址:https://www.cnblogs.com/hellohello/p/7799876.html
Copyright © 2011-2022 走看看