webopack的作用
- 转译代码（es6转为es5,scss转为css）
- 构建build
- 代码压缩
- 代码分析
webpack有哪些常见的loader和plugin
- 常见的loader有：
- style-loader 主要解析js文件里面关于css字符串，变成页面style标签。
- css-loader 转译css,使之变成js可以识别的字符串
- less-loader、sass-loader stylus-loader 转译less sass stylus变成css
- babel-loader 转译js，变成浏览器可以识别的语音
- file-loader 主要用于文件路径，将文件通过相对的url去引用输出的文件
- image-loader 加载并压缩图片
- 常见的plugin有以下：
- html-webpack-plugin 用于生成Html
- minicssextract-plugin将多个css标签变成一个css文件。
- uglifywebpackplugin 压缩文件
- 区别 loader加载器，在webpack中将一个文件都视为一个个模块，loader的作用就是使得webpack具有加载和解析不同文件的能力。它在module rules配置类型，数组的每一项都是一个object 里面描述什么类型的文件使用什么加载器和参数。 plugin 插件，扩展webpack的能力，使得它具有更多的灵活性。单独配置，每一项都是一个实例参数由构造函数传入。
如何提高webpack的构建速度
- 多入口情况下，使用CommonsChunkPlugin来提取公共代码
- 通过externals配置来提取常用库
- 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
- 使用Happypack 实现多线程加速编译使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
- 使用Tree-shaking和Scope Hoisting来剔除多余代码
如何按需加载代码
通过import(xxx)语句来控制加载时机，webpack内置了对于import(xxx)的解析将import(xxx)中引入的模块作为一个新的入口在生成一个chunk。 当代码执行到import(xxx)语句时，会去加载Chunk对应生成的文件。import()会返回一个Promise对象，所以为了让浏览器支持，需要事先注入Promise polyfill.
