webpack核心概念

webpack概述：资源打包器，在webpack中，js、css、图片、字体等资源都是模块，一切皆模块，webpack从配置的入口文件开始，去处理打包所有依赖，根据配置进行相关操作，最终产出打包产物。

1、entry

概念：webpack解析的入口文件配置

配置：

    （a）字符串：

        module.exports = {

                entry:'./src/app.js'

        }

     (b)对象：

        module.exports = {

                entry:{

                    app: './src/app.js',

                    adminApp:'./src/adminApp.js'

                }

        }

2、output

概念： webpack处理之后输出文件配置

配置：filename:指定输出文件名，path指定输出路径。

module.exports={

    entry:{

        app:'./src/app.js',

        adminApp:'./src/adminApp.js'

    },

    output:{

        filename:'[name].js',

        path:__dirname+'/dist'

    }

};

3、loaders

概念：资源对应的解析处理器，将输入内容经过loader的转化输出为另一种内容，中间进行相关处理，loader执行顺序，配置数组从后往前执行。

配置：

module.exports={

module:{

    rules:[{

            test:/\.css$/,

            use:[

                {loader:'style-loader'},

                {loader:'css-loader'},

                {loader:'sass-loader'}

            ]

        }]

    }

};

4、plugins

概念：webpack插件，可以做loader做不了的其他任何事情，插件可以监听到webpack整个编译生命周期的任何阶段。

配置：

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

module.exports={

    plugins:[

        newHtmlWebpackPlugin({template:'./src/index.html'})

    ]

};

5、mode

概念：模式，webpack为开发、生产模式提供了许多经典的默认配置，来简化开发者配置。配置项有production、development、none

配置：

module.exports={

    mode:'production'

};