var path = require("path");
var webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/app.js',
    },
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[{
                test:/\.js$/,
                include:path.resolve(__dirname,'src'),
                exclude:path.resolve(__dirname,'node_modules'),
                loader: 'babel-loader?presets[]=env',
            },{
                test:/\.html$/,
                use:['html-loader']
            },{
                test:/\.tpl$/,
                use:['ejs-loader']
            },{
                test:/\.css$/,
                use:[ 'style-loader', 
                      {
                          loader:'css-loader',
                          options:{
                              importLoaders:1
                          }
                      },
                    'postcss-loader']
            },{
                test:/\.less$/,
                use:['style-loader','css-loader', 'postcss-loader', 'less-loader']
            },{
                test:/\.scss$/,
                use:['style-loader','css-loader', 'postcss-loader', 'sass-loader']
            },{
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                 use: ['file-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body'
        }),
        new webpack.LoaderOptionsPlugin({
            options : {
                postcss : function(){
                    return [
                        require('autoprefixer')({
                            browsers: ['ie>=8','>1% in CN']
                        })
                    ];
                }
            }
        })
    ]
}

//layer.js

import './layer.less';
import mytpl from './layer.tpl';


function layer(){
    return {
        name:'layer',
        tpl: mytpl
    };
}

export default layer;

//app.js

import './app/css/common.css';

import Layer from './app/components/layer/layer.js';

const App = function(){
    var dom = document.getElementById('#app');
    var layer = new Layer();

    dom.innerHTML = layer.tpl({
        name:'sunxq',
        arr:['zhangsan','lisi','wangwu']
    });
}

new App();