一、webpack核心概念

1.Entry2.Output3.Loaders4.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()    ]}