TAT.heyli webpack 使用优化
In 未分类 on 2016年01月14日 by view: 31,638
21

原文链接

 

前言

本文不是 webpack 入门文章，如果对 webpack 还不了解，请前往题叶的 Webpack 入门，或者阮老师的 Webpack-Demos。

 

为什么要使用 Webpack

  1. 与 react 一类模块化开发的框架搭配着用比较好。
  2. 属于配置型的构建工具，比较用容易上手，160 行代码可大致实现 gulp400 行才能实现的功能。
  3. webpack 使用内存来对构建内容进行缓存，构建过程中会比较快。

第 3 点我想稍微论述一下，如果看过我之前写的 《如何写一个 webpack 插件（一）》，会发现，webpack 会将文件内容存在 compilation 这个大的 object 里面，方便各种插件，loader 间的调用。虽然 gulp 也用到了流 (pipe) 这样的内存处理方式，但感觉 webpack 更进一步。gulp 是每一个任务 (task) 用一个流，而 webpack 是共享一个流。

 

简要回顾 Webpack 的配置

webpack_config

Webpack 的配置主要为了这几大项目：

  • entry：js 入口源文件
  • output：生成文件
  • module：进行字符串的处理
  • resolve：文件路径的指向
  • plugins：插件，比 loader 更强大，能使用更多 webpack 的 api

 

常用 Loaders 介绍

  • 处理样式，转成 css，如：less-loader, sass-loader
  • 图片处理，如: url-loader, file-loader。两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
  • 处理 js，将 es6 或更高级的代码转成 es5 的代码。如： babel-loader，babel-preset-es2015，babel-preset-react
  • 将 js 模块暴露到全局，如果 expose-loader
  •  

常用 Plugins 介绍

  • 代码热替换, HotModuleReplacementPlugin
  • 生成 html 文件，HtmlWebpackPlugin
  • 将 css 成生文件，而非内联，ExtractTextPlugin
  • 报错但不退出 webpack 进程，NoErrorsPlugin
  • 代码丑化，UglifyJsPlugin，开发过程中不建议打开
  • 多个 html 共用一个 js 文件 (chunk)，可用 CommonsChunkPlugin
  • 清理文件夹，Clean
  • 调用模块的别名 ProvidePlugin，例如想在 js 中用 $，如果通过 webpack 加载，需要将 $与 jQuery 对应起来
  •  

使用优化

了解了以上介绍的 Loaders 和 Plugins 之后，基本就可以搭建一整套基于 Webpack 的构建（不需要 gulp 与 grunt，合图除外）。下面让我来介绍一下在使用过程中的一些优化点。

 

优化点一. 如何区分开发及生产环境

  1. 在 package.json 里面的 script 设置环境变量，注意 mac 与 windows 的设置方式不一样

  1. 在 webpack.config.js 使用 process.env.NODE_ENV 进行判断

 

优化点二. 使用代码热替换

使用代码热替换在开发的时候无需刷新页面即可看到更新，而且，它将构建的内容放入内在中，能够获得更快的构建编译性能，因此是官方非常推荐的一种构建方式。

 

方法一：

1. 将代码内联到入口 js 文件里 
w1

2. 启动代码热替换的 plugins
w2

 

方法二：

直接实现一个 server.js，启动服务器（需要启动热替换 plugin)，下面是我在业务中用到的一个范例。具体的一些参数可以

 

方法三：

直接在 webpack.config.js 上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。
w3

 

优化点三.import react 导致文件变大，编译速度变慢，乍办?

  1. 如果你想将 react 分离，不打包到一起，可以使用 externals。然后用<script> 单独将 react 引入
    w1

  2. 如果不介意将 react 打包到一起，请在 alias 中直接指向 react 的文件。可以提高 webpack 搜索的速度。准备部署上线时记得将换成 react.min，能减少文件大小 (减少约 600kb)
    w2

  3. 使用 module.noParse 针对单独的 react.min.js 这类没有依赖的模块，速度会更快。

 

优化点四. 将模块暴露到全局

如果想将 report 数据上报组件放到全局，有两种办法：

方法一：

在 loader 里使 expose 将 report 暴露到全局，然后就可以直接使用 report 进行上报

方法二：

如果想用 R 直接代表 report，除了要用 expose loader 之外，还需要用 ProvidePlugin 帮助，指向 report，这样在代码中直接用 R.tdw， R.monitor 这样就可以

 

优化点五. 合并公共代码

有些类库如 utils, bootstrap 之类的可能被多个页面共享，最好是可以合并成一个 js，而非每个 js 单独去引用。这样能够节省一些空间。这时我们可以用到 CommonsChunkPlugin，我们指定好生成文件的名字，以及想抽取哪些入口 js 文件的公共代码，webpack 就会自动帮我们合并好。

 

优化点六. 善用 alias。

resolve 里面有一个 alias 的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被 import 或者 require 的库，如 react, 我们最好可以直接指定它们的位置，这样 webpack 可以省下不少搜索硬盘的时间。
w6

 

优化点七. 多个 html 怎么办

  1. 使用 HtmlWebpackPlugin，有多少个 html，就排列多少个，记得不要用 inject，否则全部 js 都会注入到 html。如果真的要用 inject 模式，请务必将不需要的 js 用 exclude chunk 去掉或者用 chunk 参数填上你需要入口文件。

仅使用 app 作为注入的文件：

不使用 dev-helper 作为注入文件：