webpack优化

为什么要使用Webpack

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

第3点webpack会将文件内容存在compilation这个大的object里面，方便各种插件，loader间的调用。虽然gulp也用到了流(pipe)这样的内存处理方式，但感觉webpack更进一步。gulp是每一个任务(task)用一个流，而webpack是共享一个流。

简要回顾Webpack的配置

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中用与jQuery对应起来

使用优化

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

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

在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"

}

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

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

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

方法一：1.将代码内联到入口js文件里

image

2.启动代码热替换的plugins

image

方法二：

直接实现一个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上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。

image

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

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

方法一：

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

{

test: path.join(config.path.src, '/js/common/report'),

loader: 'expose?report'

},

方法二：

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

new webpack.ProvidePlugin({

"R": "report",

}),

** 优化点四. 合并公共代码**

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

new webpack.optimize.CommonsChunkPlugin({

name: "common",

filename: "js/common.js",

chunks: ['index', 'detail]

}),

优化点五. 善用alias。

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

image

优化点六.多个html怎么办

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

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

plugins: [

new HtmlWebpackPlugin({

chunks: ['app']

})

]

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

plugins: [

new HtmlWebpackPlugin({

excludeChunks: ['dev-helper']

})

]

如果你不想用inject模式，但又想使用html-webpack-plugin，那你需要在html里用