码迷,mamicode.com
首页 > Web开发 > 详细

webpack 编译ES6插件babel-loader

时间:2017-09-14 16:39:57      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:分享   config   conf   color   命令   启用   webp   com   src   

1、安装babel-loader

参考:http://babeljs.io/docs/setup/#installation

进入项目目录执行安装命名:

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


npm install --save-dev babel-preset-latest
babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。

2、项目结构:

技术分享

 

app.js代码为:

import layer from ‘./components/layer/layer.js‘
const App = function(){
    const NUM=1;
    alert(NUM);
    console.log(layer)
}

new App()

 

3、webpack.config.js 配置文件为

var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    entry: ‘./src/app.js‘,
    output: {
        path: __dirname + ‘/dist‘,
        filename: ‘js/[name].js‘
    },
    module: {
        loaders: [{
                test: /\.js$/,
                //以下目录不处理
                exclude: /node_modules/,
                //只处理以下目录
                include: /src/,                
                loader: "babel-loader",
                //配置的目标运行环境(environment)自动启用需要的 babel 插件
                query: {
                    presets: [‘latest‘]
                }
            }

        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: ‘index.html‘,
            filename: ‘index.html‘
        })
    ]
}

 

4、执行命令

npm run webpack

 

5、编辑后的结果

技术分享

 

webpack 编译ES6插件babel-loader

标签:分享   config   conf   color   命令   启用   webp   com   src   

原文地址:http://www.cnblogs.com/mengfangui/p/7520766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!