zoukankan      html  css  js  c++  java
  • [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6


     

    To use ES6, we need loader.

    1. Modify webpack.config.js file:
    module.exports = {
        entry: './index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname
        },
        module: {
            loaders: [
                {test: /.js$/, loader: 'babel', exclude: '/node_modules/'}
            ]
        }
    };

    We add module property, which is an object. We define the loaders property here which is an array of objects.

    • test: It is a regex, will include all the files which match the regex. In the exmaple, we say that "include all the js files".
    • loader: You need to define the ES6 loader for this, which is 'babel'. For that, you need to install it by:
    npm install babel-loader
    • exclude: Tell which files you don't want to include.

      2. Change file using ES6 style:

    //lam-dom-binding.js
    
    export default {
      bindEls(el1, el2){
        el1.addEventListener('keyup', () =>  el2.value = el1.value)
        el2.addEventListener('keyup', () =>  el1.value = el2.value)
      }
    }

      3. run: webpack --watch

    Source map


    One useful thing is see the source map (means see lam-dom-binding.js map to which part in the bundle.js). The reason it is useful is because when we open the devtool, we just saw a big bundle.js file:

    which is not useful for debugging.

    To enable the source map, we need to add one property in webpack.config.js:

    module.exports = {
        entry: './index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname
        },
        devtool: 'eval', //init compile fast, recompile also very fast
        module: {
            loaders: [
                {test: /.js$/, loader: 'babel', exclude: '/node_modules/'}
            ]
        }
    };

    After that, run 'webpack --watch' again. We can see from the devtool, it show the 'webpack://'

    But you can see that code is still ES5 style, if you want what you coded, instead of using 'eval', you can use 'eval-source-map'.

    module.exports = {
        entry: './index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname
        },
        devtool: 'eval-source-map',
        module: {
            loaders: [
                {test: /.js$/, loader: 'babel', exclude: '/node_modules/'}
            ]
        }
    };

    This can a little bit longer time to compile, then you can see the code you just worte:

    Both 'eval' and 'eval-source-map' are recommended using in dev time.

    If you want to use in production code:

    module.exports = {
        entry: './index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname
        },
        devtool: 'source-map',
        module: {
            loaders: [
                {test: /.js$/, loader: 'babel', exclude: '/node_modules/'}
            ]
        }
    };

    It will add a .map file for you. That file is not actually loaded into the browser until the DevTools are brought up.

  • 相关阅读:
    Python 里的下划线
    浅谈TCP拆包粘包问题
    40 张图带你搞懂 TCP 和 UDP
    头条面试官问:如何保证网络传输的可靠性?这就很尴尬了
    TCP协议灵魂12问,面试总会用得到(建议收藏)
    TCP网络握手
    HTTP1.0、HTTP1.1和HTTP2.0的区别
    面试官:这波HTTP究极combo,你顶得住吗?_chuhe1989的博客-CSDN博客
    腾讯面试官:说一下Android网络知识和框架?
    网络通信必备基础之Http协议&TCP/IP协议(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4312265.html
Copyright © 2011-2022 走看看