渡鸦

### 优化构建时命令行的显示日志 webpack 打包展示一堆日志，很多并不需要开发者关注 **统计信息 stats**  **优化命令行的构建日志** 使用 friendly-errors-webpack-plugin 插件 - success: 构建成功的日志提醒 - warning: 构建警告的日志提示 - error: 构建报错的日志提示 ``` module.exports = { entry: { app: './src/app.js', search: './src/search.js'...

### webpack 和ESLint 结合 **行业里面优秀的 ESLint 规范实践** [ESLint 中文官网](https://cn.eslint.org/docs/user-guide/configuring) Airbnb: eslint-config-airbnb、 eslint-config-airbnb-base 腾讯 - alloyteam团队 [eslint-config-alloy](https://github.com/AlloyTeam/eslint-config-alloy) - ivweb 团队: [eslint-config-ivweb](https://github.com/feflow/eslint-config-ivweb) **指定团队的 ESLint 规范** - 不重复造轮子，基于 eslint:recommend 配置并改进 - 能够帮助发现代码错误的规则，全部开启 -...

### 代码分割和动态import 对于大的Web应用来讲，将所有的代码都放在一个文件中显然不够有效的，特别是当你的某些代码块是在某些特殊情景下才会被使用到。webpack有一个功能就是将你的代码库分割成chunks（语块），当代码运行到需要它们的时候再进行加载。 **适用场景** - 抽离相同代码到一个共享块 - 脚本懒加载，使得初始下载的代码更小  **懒加载 JS 脚本的方式（用到这个脚本再加载它）** - CommonJS：require.ensure - ES6：动态import（目前没有原生支持，需要babel转换） **如何使用动态import** 1. 安装 babel 插件 ``` $ npm install @babel/plugin-syntax-dynamic-import --save-dev ``` 2. ES6：动态import...

### Scope Hoisting 使用和原理分析 **现象：构建后的代码存在大量的闭包代码**  **会导致什么问题？** - 大量函数闭包包裹代码，导致体积增大（模块越多越明显） - 运行代码时创建的函数作用域变多，内存开销变大 **webpack模块转换分析** **如图**  **结论** - 被 webpack 转换后的模块会带一层包裹 - import 会被转换成 __webpack_require **进一步分析 webpack 的模块机制**  分析以上代码 - 打包出来的是一个...

### tree-shaking （摇树优化） **概念：1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打包到bundle 里面去，tree shaking 就是只把只用到的方法打入bundle，没用到的方法会在 ugligy 阶段被擦除掉** **使用：webpack 默认支持，在 .babelrc 里设置 modules:false 即可，mode=production 的情况下默认开启** **要求：必须是 ES6 的语法，CJS（common js） 的方式不支持** **DCE(Dead code elimination)原理 - tree-shaking 用到了DCE原理** - 代码不会被执行，不可到达 -...

### webpack 提取公共资源 **基础库分离：React示例** **思路：将react、react-dom 基础包通过cdn引入，不打入bundle** **方法：使用html-webpack-extends-plugin** ```js const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); plugins: [ new HtmlWebpackExternalsPlugin({ externals: [ { module: 'react', entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js', global: 'React', }, { module: 'react-dom', entry:...

### source map 使用 source map 的作用是定位webpack打包之后的bundle文件的源码位置，科普请看这篇文章[JavaScript Source Map 详解](http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html) **开发环境开启，线上环境关闭：线上排查问题的时候可以将sourcemap 上传到错误监控系统** **sourcemap 关键字** - eval: 使用eval包裹模块代码 - source mao: 产生 `.map` 文件 - cheap: 不包含列信息 - inline: 将 `.map`...

### 多页面（MPA）应用打包方案 在webpack里，每个页面对应一个 `entry`，一个html-webpack-plugin。 缺点：每次新增或删除页面都需要修改 webpack 配置。 ```js module.exports = { entry: { index: './src/index.js', search: './src/search.js' } }; ``` **解决方案1：动态获取 entry 和设置 html-webpack-plugin 数量** **解决方案2：利用 glob.sync** [glob库](https://www.npmjs.com/package/glob) ```js entry:...

### 静态资源内联 资源内联的意义 **代码层面** - 页面框架的初始化脚本 - 上报相关打点 - css 内联避免页面闪动 **请求层面：减少HTTP网络请求数** - 小图片或者字体内联（url-loader） **raw-loader 内联 HTML** ``` ${require('raw-loader!babel-loader!./meta.html')} ``` **raw-loader 内联 JS** ``` ${require('raw-loader!babel-loader!../node_modules/lib-flexible')} ``` **css内联1 - style-loader** ```js...

### 移动端 CSS px 自动转化成 rem 首先先看下移动端的浏览器分辨率  px 自动装换成 rem可以使用 px2rem-loader，页面渲染时计算根元素的 font-size 值。也可以使用手淘的[lib-flexible插件](https://github.com/amfe/lib-flexible) **webpack 配置如下** ```js module: { rules: [ { test: /.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', {...