m0_69067003的博客

不建议直接使用import @babel/polyfill，这样做会全局引入整个polyfill包，比如array.from全局引入，不但体积大，而且还会污染全局环境。配置library，type可以设置为：window，commonjs，module，amd等等，可以设置为umd可满足多个type但不包括module。当模块运行在commonjs上下文中，this指向的是module.exports并不是window，所以可以覆盖一下。npm publish发布，其他人可以使用。

entry可以配置为字符串、数组、对象（可以分开打包）上图，app2.js和app.js会打包到一个文件main.js中；lodash会被打包到lodash.js。

webpack通过resolvers实现模块之间的依赖和引用。所引用的模块可以来自应用程序的代码，也可以是第三方库，resolver帮助webpack从每个require/import语句中，找到需要引入的bundle中的模块代码，当打包模块时，webpack使用enhanced-resolve来解析文件路径。

首先搭建一个基本的webpack环境：执行npm init -y，创建pack.json，保存安装包的一些信息执行npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D，出现node_modules和package-lock.json。

可以通过命中缓存降低网络流量，是网站加站速度更快。然而在部署新版本时，不更改资源的文件名，浏览器可能认为你没有更新，所以会使用缓存版本。由于缓存存在，获取新的代码成为问题。接下来将配置webpack使得生成的文件会被缓存，并且变化时又能请求到新的文件。如果文件内容改变了，文件名没变，浏览器会使用缓存，所以通过修改output的filename可以实现根据文件内容变化同时修改文件名。

很多配置在开发环境和生产环境存在不一致的情况，比如开发环境没有必要设置缓存，生产环境需要设置公共路径等等。

webpack自身可以加载js模块，不能转化js代码如果打包js文件会原封不动传到浏览器，如果当前浏览器支持ES6代码则可以正常显示，若浏览器版本过低则不支持，需要使用babel-loader结合babel和webpack对js文件解析。

将src文件下的toml，yaml，json5的文件导入。yaml:有key，有value,靠缩进完成子项设置；toml:通过key=value的格式，子项使用【】；json5：可以加注释，key不用加引号，值可以用单引号，也可以使用转义字符；

使用asset打包.jpg后缀的文件，在使用asset时可以自定义资源界限，默认是小于8kb会被视为inline模型，反之是resource模型。grunt和gulp是最早使用的任务执行器，是将所有的项目文件拼接在一起（IIFE）,从而解决了大型作用域问题。当函数变成了一个立即调用的表达式时，表达式中的变量不能够在外部访问，不会污染window，解决了作用域问题。如何加载文件：（在index.html使用script标签加载，data-main='入口文件路径'）