webpack

WebPack五个核心概念：

        1.Entry入口

                WebPack以哪个文件为入口起点考试打包，分析构建内部依赖图

        2.Output 输出

                指示Webpack打包后的资源bundles输出到哪里去，以及如何命名

        3.Loader 加载

                让webpack能够去处理那些非javascript文件（自身只理解javascript）

                css-loader   处理css文件    

                style-loader   css插入到header

                less-loader   处理less

                MiniCssExtractPlugin.loader  压缩抽出css-loader

                file-loader   当文件比较小转成base64（以便减少一次http请求）

        4.Plugins 插件

                可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

        5.Mode 模式执行  Webpack使用相应模式的配置

                development 能让代码本地调试运行的环境（开发模式）

                     会将process.env.NODE_ENV的值设为development。

                     启用 NamedChunksPlugin 和 NamedModulesPlugin。

                production 能让代码优化上线运行的环境（生产环境）

                      会将 process.env.NODE_ENV 的值设为 production。         

                     启用FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，

                    ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，

                    OccurrenceOrderPlugin，SideEffectsFlagPlugin， UglifyJsPlugin