使用 webpack + babel 学习 es2015

1.安装必要依赖

"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",

"webpack": "^2.2.1",
"webpack-dev-server": "^1.16.3"

2. 脚本

"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},

3.webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }

            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

4.html文件中引用bundle.js 

5.

npm run dev  //npm start

 

posted @ 2017-02-04 16:23  JonasYu  阅读(325)  评论(0编辑  收藏  举报