mengran_code的博客

一个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去，tree shaking 就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在uglify 阶段被擦除掉。uglify阶段：将 JavaScript代码进行压缩、混淆，并去除一些不必要的代码，从而减小文件体积。webpack4及以上默认内置了，当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法，CJS 的⽅式不⽀持。

add-asset-html-webpack-plugin参考地址：https://www.npmjs.com/package/add-asset-html-webpack-plugin/v/3.2.2?起作用 就是把build/library/library.dll.js拷贝到编译后的dist文件夹下，并且通过script标签引入到index.html中。官网地址：https://github.com/stephencookdev/speed-measure-webpack-plugin#readme。

冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需重新发布的基本功能失效等严重问题。

一个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去，就是只把⽤到的⽅法打⼊ bundle ，没⽤到的⽅法会在uglify阶段被擦除掉。uglify阶段：将 JavaScript代码进行压缩、混淆，并去除一些不必要的代码，从而减小文件体积。webpack4及以上默认内置了，当mode为production情况下默认开启。进行tree shaking条件是必须是 ES6 的语法，CJS 的⽅式不⽀持。

我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill’了，它会在使用的地方自动注入。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之后不再作为 webpack 的依赖了，我们使用时需要单独安装这个工具。，便可以访问到我们刚才创建的 html 文件了，打开控制台就可以看到前边的 js 代码打印出来的 hello world 了。在日常开发中，我们不可能每次修改一次代码就执行一次构建，我们需要一个方便本地开发的工具，和 webpack 配套的则是。然后我们执行npm run build，就会生成「dist/bundle.js」文件，这说明配置文件生效了。