zoukankan      html  css  js  c++  java
  • webpack(三)使用 babel-loader 转换 ES6代码

    查询各个 loader的使用,可以在官网上查询。

      https://www.npmjs.com

    (一)安装 babel-loader,babel-core。

        使用命令

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

        因为ES6语法每年都在更新,因此,我们需要一定的规则去转换。

    npm install --save-dev babel-preset-latest


    (二)

      首先按照如下层级建立相应文件

      

        将测试用的ES6代码放在 app.js,使用CMD语法,将layer嵌入对象layer中。app.js代码如下。

    import layer from './components/layer/layer.js';
    
    const App = function () {
        console.log(layer);
    }
    
    new App();

        layer.js代码如下

    function layer(){
        return{
            name:'layer',
            tpl:'testTpl'
        };
    }
    
    export default layer;

    (三)webpack.config.js代码如下

    var htmlWebpackPlugin = require('html-webpack-plugin');
    var path = require('path');
    console.log(__dirname);
    module.exports = {
        /*context: __dirname,*/
        entry: './src/app.js',
    
        output: {
            path: './dist',
            filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
        },
        module: {
            loaders: [
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    /*exclude: path.resolve(__dirname, 'node_modules'), //编译时,不需要编译哪些文件*/
                    /*include: path.resolve(__dirname, 'src'),//在config中查看 编译时,需要包含哪些文件*/
                    query: {
                        presets: ['latest'] //按照最新的ES6语法规则去转换
                    }
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: 'index.html', //通过模板生成的文件名
                template: 'index.html',//模板路径
                inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接
    
            })
        ]
    };
  • 相关阅读:
    python_面向对象——多态
    python_面向对象——封装
    python_面向对象——多继承
    python_面向对象——继承
    python_面向对象——对象间的组合关系
    python_面向对象——类之间的依赖关系
    python_面向对象——对象之间的关联关系
    python_异常处理
    python_反射:动态导入模块
    python_网络编程socketserver模块实现多用户通信
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/6486695.html
Copyright © 2011-2022 走看看