Webpack

作用

打包所有的资源
webpack webpack-dev-serve(用于本地预览)

• 转译代码
• 构建build
• 压缩代码
• 代码分析

应用示例

1. 转译js
   内置了babel-loader 因此可以直接转译js代码为es5.
2. 理解文件名中哈希的用途
3. 生成HTML
   html-webpack-plugin
4. 引入 CSS
   style-loader, css-loader
5. 引入Scss

• 通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。
• style-loader, css-loader, sass-loader
• 使用 dart-sass 而不是 node-sass

5. 引入LESS和Stylus
   style-loader, css-loader, less-loader
   style-loader, css-loader, stylus-loader
6. 引入图片
   file-loader
7. 使用懒加载
   import('./xxx').then(()=>{}).catch(()=>{})
8. 自己做一个loader
9. 自己写一个plugins

Loader 和 Pugins

竞品分析

1. Parcel

• 比 webpack 配置简单
• 适合 demo 学习

2. Rollup

• 比 webpack 打包的体积更小
• 但是生态不够丰富
• 适合库的开发

基于 webpack 的工具

1. @vue/cli
2. create-react-app
3. @angular/cli