webpack使用优化(持续更新,欢迎补充)

5,119 阅读3分钟
原文链接: github.com

前言

本文不是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的设置方式不一样
"scripts": {
    "publish-mac": "export NODE_ENV=prod&&webpack -p --progress --colors",
    "publish-win":  "set NODE_ENV=prod&&webpack -p --progress --colors"
}
  1. 在webpack.config.js使用process.env.NODE_ENV进行判断

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

方法一:

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

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

方法二:

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

var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");

config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000");  // 将执替换js内联进去
config.entry.index.unshift("webpack/hot/only-dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    hot: true,
    historyApiFallback: false,
    // noInfo: true,
    stats: { 
        colors: true  // 用颜色标识
    },
    proxy: {
        "*": "http://localhost:9000" // 用于转发api数据,但webpack自己提供的并不太好用
    },
});
server.listen(9000);

方法三:

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

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

  1. 如果你想将react分离,不打包到一起,可以使用externals。然后用