wepack学习笔记

webpack突出点是代码分割，模块化。包括entry、output、loaders、plugins。其中loaders中有很多规则，用loaders出来，loaders又包含与编译相关、样式相关、文件相关。主要是用来处理文件、把这些文件转化成对应模块。plugins参与整个打包过程，打包优化和压缩。还可以配置编译时的变量。

loaders可以让webpack处理那些非js文件，如.vue文件（webpack只能理解js）

--D和--S的区别？

--D等价于 --save-dev

--S是--save的缩写

--D的安装依赖用于开发环境，保存在devDependencies

--S依赖的文件用于生产环境，也是线上环境，整个项目必须依赖的文件，例如jQuery。

目前的webpack已经到了4时代，以前的一些命令行可能不能 用了，例如：

webpack demo.js bundle.demo.js

就会报错。

现在要用

webpack demo.js -o bundle.demo,js

你在运行时还可能报需要你安装webpack-cli或者wenpack-command.这时候你需要全局安装webpack-cli。然后在使用npm install webpack --save-dev即可

babel Runtime transform局部垫片，为开发框架准备

babel-polyfill全局垫片，为开发应用准备

最后，webpack用来打包最终还是生产html，css，js，无非里面打包会出现代码分割，模块化，提取公共代码，把打包后的css和js放在html中。例如用style-loader就可以把css放在html 的meta中，代码公共提取用commonchunkpligin。最后还可以配合gulp，进行自动化部署。gulp的主要本领是用来调度，编译还是要靠webpack。gulp可以让你生成的代码通过运行命令自动上传的服务端。gulp的核心是管线化思想。用pipe一层层的管道来处理。现在webpack到了4时代，代码分割和懒加载已经很成熟，它的主要目的还是未来让页面更快的展现出来。提高首屏的速度。

模块热更新和浏览器刷新不是一回事，模块热更新是更高级别的刷新浏览器。可以在你修改代码后，不用手动刷新浏览器，自动看到修改后的结果。

在wepack中经常用到的是commonjs和es6语法规范

commonjs特点：动态加载，每个模块都是一个对象，因为只有在运行的时候才能得到这个对象，导致完全没有办法在编译时做“静态优化”（例如做类型校验）。

es6的特点：静态解析。你看每个es6模块在使用之前都要提前引入。es6中的模块并不是对象，而是通过export命令显示指定输出代码，再通过import命令输入。这种叫编译时加载，或者叫静态加载，由于是在编译时就完成模块加载，比commonjs效率要高。因为commonjs是运行时加载。代码运行是打包，编译、运行。加载的也不是整个模块。因为你在es6模块中经常会看见一个模块中会有好多export导出。

我们可以从上述看到，es6的特点是静态解析，commonjs的特点是动态解析。es6要想实现按需加载，可以用tree-shaking(树摇晃，把枯叶子摇下来，也就是把无用的代码去除)。可以做到减小打包后代码的体积。缩小应用的加载时间。