1 作用
- 转译代码（ES6转为ES5, SCSS转为CSS）
- 将一个或多个 JS 文件打包成对应的文件
- 将一个或多个 CSS 文件打包成对应的文件
- 构建build
- 代码压缩
- 代码分析
2 loader
- webpack打包JS,无需安装额外 loader，webpack自带此功能(内置了babel-loader)
- css-loader:将css加载为js字符串
- style-loader:将css放在style里并加载至head
- file-loader:将文件转译成文件路径
- scss-loader:将scss翻译成css
- stylus-loader:将stylus加载为css
- less-loader:将less加载为css
3 plugin
- MiniCssExtractPlugin:将 CSS 代码提取(extract)成单独的文件
- HtmlWebpackPlugin:自动生成 HTML
4 loader 和 plugin 的区别
- loader直译为"加载器"
- Webpack将一切文件视为模块，但是webpack原生是只能解析js文件
- 如果想将其他文件也打包的话，就会用到loader
- Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力
- Plugin直译为"插件"
- Plugin可以扩展webpack的功能，让webpack具有更多的灵活性
- 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果
5 webpack-dev-server
- 文件内容变化就自动转译代码，并自动刷新页面
- 提供 server 方便开发预览
6 按需加载
懒加载
button.onclick()=>{
const promise=import(./lazy.js)
promise.then((module)={
const fn=module.default
fn()
},()=>{
console.log('加载失败')
})
}
UI组件库的按需加载
- 很多组件库已经提供了现成的解决方案
- Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安装以上插件后，在.babelrc配置中或babel-loader的参数中进行设置，即可实现组件按需加载了
7 如何提高webpack的构建速度
- 多入口情况下，使用CommonsChunkPlugin来提取公共代码
- 通过externals配置来提取常用库
- 利用DllPlugin和DllReferencePlugin预编译资源模块
- 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
- 使用Happypack 实现多线程加速编译
- 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度， 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
- 使用Tree-shaking和Scope Hoisting来剔除多余代码
9 如何利用webpack来优化前端性能（提高性能和体验）
- 用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。
- 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
- 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
- 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
- 提取公共代码。
9 ...
未完待续...
