webpack分享小记

多入口多出口

一般项目的需求：

• 构建咱们发布须要的 HTML、CSS、JS 文件
• 使用 CSS 预处理器来编写样式
• 处理和压缩图片
• 使用 Babel 来支持 ES 新特性
• 本地提供静态服务以方便开发调试

resolve模块路径解析

• resolve.alias
• resolve.extensions
• resolve.modules
• resolve.mainFiles
• resolve.resolveLoader

loader 模块代码转换的工做由 loader 来处理，除此以外的其余任何工做均可以交由 plugin 来完成

• 重要的几个概念：入口，loader，plugin，输出

• loader 的匹配规则中有两个最关键的因素：一个是匹配条件（test,include,exclude,and,or,not），一个是匹配规则后的应用(loader名字)。 use 来指定须要用到的 loader 对于一些不须要解析依赖（即无依赖） 的第三方大型类库等，能够经过这个字段来配置，以提升总体的构建速度。 module.noParse noParse: /jquery|lodash/

plugin 不过因为须要提供不一样的功能，不一样的插件自己的配置比较多样化。

• copy-webpack-plugin复制文件
• IgnorePlugin(内置插件) 忽略某些模块 例如moment.js日期类库，里面有许多i18n代码，致使打包后的文件较大，而实际场景又不须要这些，忽略本地化的内容 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

webpack-dev-server

• before 在 webpack-dev-server 静态资源中间件处理以前，能够用于拦截部分请求返回特定内容，或者实现简单的数据 mock

• after 在 webpack-dev-server 静态资源中间件处理以后，比较少用到，能够用于打印日志或者作一些额外处理。

• 中间件就是在 Express 之类的 Web 框架中实现各类各样功能（如静态文件访问）的这一部分函数。多个中间件能够一块儿协同构建起一个完整的 Web 服务器。

• webpack-dev-middleware（express提供的webpack-dev-server静态服务能力的中间件）

• webpack-dev-middleware 的好处是能够在既有的 Express 代码基础上快速添加 webpack-dev-server 的功能，同时利用 Express 来根据须要添加更多的功能，如 mock 服务、代理 API 请求等。

• 首先咱们要明白，对于 webpack 的配置，实际上是对外暴露一个 JS 对象，因此对于这个对象，咱们均可以用 JS 代码来修改它

Hot Module Replacement

• HMR 能够理解为加强版的 Hot Reloading，但不用整个页面刷新，而是局部替换掉部分模块代码而且使其生效，能够看到代码变动后的效果

• webpack 内部运行时，会维护一份用于管理构建代码时各个模块之间交互的表数据，webpack 官方称之为 Manifest，其中包括入口代码文件和构建出来的 bundle 文件的对应关系

• 目前weback4.x中只须要将hot：true就能够了，不须要手动引入HotModuleReplacementPlugin

优化前端资源加载：

• 图片压缩，dataUrl,
• 分离代码，静态文件，利用浏览器缓存机制
• js：按需加载代码（import） 代码压缩（uglify：Tree shaking --删除没有用到的代码,有时候却没有删除掉，babel搞得鬼），sideEffects （https://github.com/webpack/webpack/blob/master/examples/side-effects/README.md）

提高webpack打包速度

resolve优化：

减小 resolve 的解析

1. resolve.extensions：用来代表文件后缀列表，默认查找顺序是 ['.js', '.json']，若是你的导入文件没有添加后缀就会按照这个顺序查找文件。咱们应该尽量减小后缀列表长度，而后将出现频率高的后缀排在前面
2. resolve.alias：能够经过别名的方式来映射一个路径，能让 Webpack 更快找到路径
3. module.noParse：若是你肯定一个文件下没有其余依赖，就可使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库颇有帮助

loader优化：

特别是由于 Babel 会将代码转为字符串生成 AST，而后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低

1. 优化 Loader 的文件搜索范围
2. HappyPack能够将 Loader 的同步执行转换为并行的
3. node_modules里面的代码都是编译过的，因此没有必要再去处理一遍，经过（ exclude: /node_modules/）排除掉
4. Babel 编译过的文件缓存起来，下次只须要编译更改过的代码文件便可，这样能够大幅度加快打包时间（loader: 'babel-loader?cacheDirectory=true'）

plugin优化

• 换种方式处理图片： 咱们能够直接使用 imagemin 来作图片压缩，编写简单的命令便可。而后使用 pre-commit 这个类库来配置对应的命令，使其在 git commit 的时候触发，而且将要提交的文件替换为压缩后的文件。不用每次运行打包项目都压缩图片

• 使用 DLLPlugin打包公共代码，将公共代码抽离成单独文件的优化方案（css）

• optimization.concatenateModules:true 分析出模块之间的依赖关系，尽量的把打包出来的模块合并到一个函数中去

webpack 整个构建流程