一、webpack中心觀點

1.Entry
2.Output
3.Loaders
4.Plugins

二、Entry

代碼進口

打包進口

單個或多個進口，多個進口：多頁面應用程序；或離開的。

示例：

// 單個
module.exports = {
    entry: 'index.js'
}

// 多個進口
module.exports = {
    entry: ['index.js', 'vendor.js']
}

// 別的寫法，引薦寫法
module.exports = {
    entry: {
        index: 'index.js'
    }
}

module.exports = {
    entry: {
        index: 'index.js',
        vendor: 'vendor.js'
    }
}

module.exports = {
    entry: {
        index: ['index.js', 'app.js'],
        vendor: 'vendor.js'
    }
}

三、Output

打包成的文件（bundle）
一個或多個
自定義劃定規矩

示例：

// 單個輸出
module.exports = {
    entry: {
        index: 'index.js'
    },
    output: {
        filename: 'index.min.js'
    },
}

// 多個輸出
module.exports = {
    entry: {
        index: 'index.js',
        vendor: 'vendor.js'
    },
    output: {
        filename: '[name].min.[hash:5].js'
    }
}

四、Loaders

1.處置懲罰文件
2.轉化為模塊

示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'css-loader'
            }
        ]
    }
}

五、Plugins

1.介入打包全部歷程
2.打包優化和緊縮
3.設置編譯時的變量
4.極為天真的

示例：

const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}