美文网首页
webpack配置babel处理es6

webpack配置babel处理es6

作者: 飞飞廉 | 来源:发表于2018-01-10 16:30 被阅读0次
    • babel

    babel官网:http://babeljs.io/docs/setup/#installation
    首先安装babel

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

    安装插件

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

    通过query配置参数

    query:{ "presets": ["latest"] } === { "presets": ["env"] }
    

    打包babel-loader很慢,因此如何改善呢?

    exclude:__dirname+'./node_modules',//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间
    include:__dirname+'./src',
    
    var htmlWebpackPlugin=require('html-webpack-plugin');
    var path=require('path')
    
    module.exports={
        entry:'./src/app.js',
        output:{
            path:__dirname+'./dist',
            filename:'js/[name].bundle.js'
        },
        module:{
            loaders:[
                {
                    test:/\.js$/,
                    loader:'babel-loader',
                    // exclude:__dirname+'node_modules',//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间
                    // include:__dirname+'src',
                    exclude:path.resolve(__dirname,'node_modules'),
                    include:path.resolve(__dirname,'src'),
                    query:{//若在package.json中定义了这个presets,则这边可以删掉
                        presets:['latest']
                    }
                }
            ]
        },
        plugins:[
            new htmlWebpackPlugin({
                filename:'index.html',
                template:'index.html',
                inject:'body',
                title:'this is a complete webpack demo'
            })
        ]
    }
    

    相关文章

      网友评论

          本文标题:webpack配置babel处理es6

          本文链接:https://www.haomeiwen.com/subject/oevonxtx.html