webpack + babel + less

首先初始化

 npm init 

安装webpack

npm install webpack --save

安装babel

npm install babel-core babel-preset-es2015 --save

npm install babel-loader --save

安装less

npm install css-loader style-loader less less-loader --save

创建一个webpack.config.js配置文件

var path = require('path')

var outPath = path.resolve(__dirname, './bundle')

module.exports = {

        entry: './app.js',

        output: {

                path: outPath,

                filename: 'app.bundle.js',

        },

       module: {

                loaders: [{

                            test: /\.js$/,

                            exclude: /node_modules/,

                            loader: 'babel-loader'

                },{

                           test: /\.css$/,

                           exclude: /node_modules/,

                           loader: 'style-loader!css-loader'

                 },{

                            test: /\.less$/,

                            exclude: /node_modules/,

                             loader: 'style-loader!css-loader!less-loader'

                 }]

          }

}

在根目录下创建一个.babelrc文件

{ "presets": [ "es2015" ] }

在package.json中配置scriptsm,添加脚本

"start": "webpack --watch --progress --colors --display-chunks "

npm start 运行

我的项目地址：github