babel和webpack的区别？

  • babel：JS新语法编译工具，不关心模块化

  • wepack：打包构建工具，是多个loader、plugin的集合

    Webpack

    1、在dev模式下，启动本地服务，设置接口请求代理
    2、使用babel-loader处理ES6，配合.babelrc的presets引入默认的plugins集合
    3、sass-loader、postcss-loader、css-loader、style-loader
    4、在prod模式下，使用url-loader，按图片大小（5kb）处理，内联的base64格式；并结合CDN
    5、在prod模式下 ，在entry中配置多入口，结合output（包括命名的hash），最终在plugins中塞入html中
    6、每次prod下，都需要cleanWebpackPlugin
    7、抽离压缩css文件，使用mini-css-extract-plugin

  • 在rules中使用MiniCssExtractPlugin.loader，

  • 在plulgins中抽离，使用MiniCssExtractPlugin，并制定hash命名和文件所处地址
  • 在optimization中压缩

8、抽离公共代码和第三方代码

  • 在optimization中，分割代码（splitChunks）
  • 对于第三方，需要test来命中是否路径，并且优点判断
  • 对于公共代码，则需要判断复用次数。（至少2次）
  • 并在HtmlwebpackPlugin中决定引入哪些chunk

9、webpack默认支持异步懒加载

  • import()

10、对于JSX的解析

  • vue使用vue-loader
  • react则是在babel中配置@babel/preset-react

优化构建速度
用于生产环境
1、在rules中开启babel缓存
2、用IgnorePlugin忽略无用文件，像是多语言
3、noParse避免重复打包，像是vue.mini.js这样mini.js结尾的文件
4、在plugins中使用happypack开启多进程，结合ParallelUglifyPlugin并行压缩
不用于生产环境
5、在devServer中配置自动刷新，watch：true，并配置watchOptions
6、在pulgins中配置热更新，在代码中需要if（module.hot）判断 & module.hot.accept回调
7、动态链接库插件（DllPlugin），针对稳定的、体积大的第三方库

babel-polyfill（）
babel-runtime（不会污染全局；做lib）

基本配置

在package.json中的写法

  1.   "scripts": {
  2.     "devBuild": "webpack --config build/webpack.dev.js",
  3.     "dev": "webpack-dev-server --config build/webpack.dev.js",
  4.     "build": "webpack --config build/webpack.prod.js"
  5.   },

一般会将配置分为三类

  • common：作为公共配置，结合const { smart } = require('webpack-merge')在dev和prod中merge
  • dev：配置devServer
  • prod：

使用webpack-dev-server启动本地服务，可以设置代理

module chunk bundle 的区别

module（模块）：多个源码文件，webpack中一切皆模块（只要可以引入的）
chunk：多模块合并成的（还在内存中），如entry、import()、splitChunk
bundle：最终的输出文件

Babel