webpack4概念

本篇可以说是webpack中文官网的番外，因为目前webpack中文官网针对webpack4.29.6还未更新，这里做相关补充：

webpack的核心概念

• 入口（entry）
• 输出（Output）
• 加载器（Loaders）
• 插件（Plugins）
• 模式（Mode）
• 浏览器兼容性（Browser Compatibility）
  webpack支持所有符合ES5的浏览器（不支持IE8及以下版本），webpack需要Promise来import和require.ensure()。如果想要支持旧浏览器，你需要加载polyfill。

Mode

webpack4的mode有，node，development，production(默认值)。
在webpack.config.js中：

module.exports = {
  mode: 'production'
};

或者在CLI命令行中：

webpack --mode=production

Why webpack？

在理解使用webpack之前，我们简单回顾下，在bundle还没有出现之前，我们是如何在weba上使用javascript的。
在浏览器中运行javascript有两种方法，其一，为每个功能添加一个script脚本，但是很难拓展，因为加载太多脚本会导致网络瓶颈。其二，将所有的js脚本打包在一起，这会导致作用域，大小，可读性和可维护性较差。
IIFE立即执行函数解决大型项目的作用域问题，常用的自动化脚本有，Make，Gulp，Grunt，Broccoli，Brunch，但是更改一个文件就必须重新构建整个项目，延迟加载或者说懒加载比较难做到，需要开发维护
JavaScript的模块化要感谢NodeJS,webpack运行在node.js上，node可以运行在客户端和服务端中使得javascript运行。CommonJS提出了Require,允许模块化引入文件，解决了开箱即用的范围问题
浏览器目前对CommonJS还不支持，然后就产生了像Browserify，RequireJS，SystemJS这样的模块化工具，使得我们可以在浏览器环境运行CommonJS模块
ESM，是es6模块化的标准，目前浏览器支持还不完整，但是是一个趋势了。

webpack就是为了模块化而生，是一个JavaScript应用程序的静态模块打包器。