const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        'index': './assets/js/index.es6'
    },
    output: {
        // path:指定編譯的路徑
        path: path.join(__dirname, './assets/'),
        // publicPath:給每個編譯好的文件，在html中前面加上同樣的路徑
        publicPath: './',
        filename: 'js/[name].bundle.js'
    },
    module: {
        rules: [{
            test: /\.es6$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['env', {
                            //關閉babel編譯es6,打開treeShaking
                            modules: false
                        }],
                    ]
                }
            }]
        }, {
            test: /\.less$/i,
            use: ExtractTextPlugin.extract({
                // fallback 所有的loader都失敗了，才調用這個
                fallback: 'style-loader',
                use: [{
                    loader: 'css-loader'
                }, {
                    loader: 'less-loader'
                }]
            })
        }]
    },
    // 放到cdn，就不需要打包進項目了
    external:{
        jquery:'window.$'
    },
    plugins: [
        new ExtractTextPlugin("css/[name].css"),
        //提取出公用代碼
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            minChunks: 2,
            filename: 'js/[name].js'
        }),
        // 自動把靜態文件插入html
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            inject: true
        }),
        // treeShaking 開啓壓縮，自動去除沒用到不需要的代碼
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            },
            output: {
                comments: false
            },
            sourceMap: false
        }),
        // 把沒用的function幹掉了，代碼看起來更好看
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
}