webpack使用优化（基本篇）

lcxfs1991 commented 8 years ago

前言

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

为什么要使用Webpack

与react一类模块化开发的框架搭配着用比较好。
属于配置型的构建工具，比较用容易上手，160行代码可大致实现gulp400行才能实现的功能。
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，合图除外）。下面让我来介绍一下在使用过程中的一些优化点。

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

在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文件里

2.启动代码热替换的plugins

方法二：

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

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

如果你想将react分离，不打包到一起，可以使用externals。然后用<script>单独将react引入
如果不介意将react打包到一起，请在alias中直接指向react的文件。可以提高webpack搜索的速度。准备部署上线时记得将换成react.min，能减少文件大小(减少约600kb)
使用module.noParse针对单独的react.min.js这类没有依赖的模块，速度会更快。
优化点四.将模块暴露到全局

如果想将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可以省下不少搜索硬盘的时间。

优化点七. alias的索引路径。

有时候你的node_modules包可能会放在上层父文件夹中，这时你可以使用resolve.moduledirectories来扩张你的索引路径，例如我们给redux做一个alias：

 resolve: {
        moduledirectories:['node_modules', config.path.src],
        extensions: [".js", ".jsx",],
        alias: {
            'redux': 'redux/dist/redux',
        }
    },

这样的话，它的索引路径会如下：

/a/b/node_module/redux/dist/redux
/a/node_module/redux/dist/redux
/node_module/redux/dist/redux

要注意的是多加索引路径可能会导致性能下降，所以除非项目复杂，否则慎用这个功能。

优化点八.多个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里用<script>标签放入对应的js，以及用入对应的css。记住，这些资源的路径是在生成目录下的，写路径的时候请写生成目录下的相对路径。

优化点九. html-webpack-plugin不用使inject模式没又md5，而且不支持文件内联怎么破？

当时我就给维护者提了一个issue--Add inline feature to the plugin。

然后维护者在开发的分支上加了这么一个特性（证明维护者不想在插件里加内联功能了，想让我来弄）：

事件允许其它插件去使用执行事件 html-webpack-plugin-before-html-processing html-webpack-plugin-after-html-processing html-webpack-plugin-after-emit

使用办法：

  compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
    htmlPluginData.html += 'The magic footer';
    callback();
  });

不过我还是决定自己开发一个了一个插件 html-res-webpack-plugin，有中英文文档可以参考。其实html-webpack-plugin以js作为入口可能跟webpack的理念更为一致，但其实直接在html上放link和script更加方便直白一些。而且html-webpack-plugin局限性太多，如果我想在script上加attribute也是比较麻烦的事儿。所以我干脆开发一个可以允许在html上直接放link和script而且支持内联及md5的插件。

但相信我之后也会针对html-webpack-plugin再写一个内联及md5的插件，适配一直在用这个插件的人。

优化点十.用gulp-webpack速度慢乍办

上图是初始化构建30个文件的用时，一共用了13秒。用了externals优化后，还有100多kb，比用纯webpack优化要大50多kb。而且，由于你用的是gulp-webpack，每次有文件改动，都必须全部重新编译一次。因此，跟react搭配建议还是不要用gulp-webpack。因为如果你使用webpack的话，即使初次启动时速度也并不快，但开发过程中，webpack会自动识别，只会重新编译有修改的文件，这大大加快了编译构建速度。

没办法，老项目改造，真的要用，乍办？我提供以下思路（1）当非js文件改变的时候，不要去跑js打包的任务（2）非公共的js发生改变的时候，只执行这个js的打包任务

下图是优化了之后，在开发过程中非公共文件修改后的编译速度。我的娘，纯webpack只需要100多200ms。建议还是用webpack吧。

优化点十一.如果在通过webpack在项目中使用bootstrap, jquery以及fontawesome

这一点对于创业公司来说可能比较有用，它们的初期产品都需要快速上线，用一些比较成熟的UI框架会比较好。

这样，首先我们需要jquery文件，并且安装bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。还需要sass-loader(3.1.2)及less-loader(2.5.3)。

然后，在主要入口文件要这么引用下面的样式文件：

require('bootstrap/less/bootstrap.less');
require('font-awesome/scss/font-awesome.scss');
require('./index.scss');

在webpack.config.js的entry项目里，可以加上这个vendor:

common: ['jquery', 'bootstrap'],

在loaders里加入以下loader，将jQuery暴露到全局:

{
    test: path.join(config.path.src, '/libs/jq/jquery-2.1.4.min'),
    loader: 'expose?jQuery'
},

再添加以下loader，让webpack帮助复制font文件

{ 
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,  
        loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]' 
},

在plugins里添加ProvidePlugin，让$指向jQuery

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
}),

这样，就可以同时使用jQuery, Bootstrap和Fontawesome了。

webpack会取代gulp吗

未必，但在开发环境，以及不需要一些功能如合图的情况下，webpack可以完全取代gulp，至少现在我有三个项目完全用webpack进行开发和部署上线
要取代gulp,还需要不断发展它的loader以及plugin生态，至少，完善一下开发者文档啊。
有样版boilerplate项目吗

目前有一个还没有成型的，我先放在这里，目前可以通过查看gulpfile.js和webpack.config.js文件进行学习 steamer_branch_v2。要成为boilerplate还待我花一周时间整理。

推荐文章

开发工具心得：如何 10 倍提高你的 Webpack 构建效率

MeCKodo commented 8 years ago

至少，完善一下开发者文档啊

lcxfs1991 commented 8 years ago

你是指那个boilerplate吗？我这两天弄一下哈。

MeCKodo commented 8 years ago

不是，重复了下webpack会取代gulp哈！ :) 觉得webpack文档超乱 : (

lcxfs1991 commented 8 years ago

因为它是配置型的构建，所以内容比较多。而且例子也不足。 gulp属于任务型的，更多依赖插件，所以文档相对简单一些。

cssmagic commented 8 years ago

谢谢分享。对学习 Webpack 很有帮助 :+1:

另建议给代码块加语法着色效果。部分图片也可以以代码块的方式来显示。

lcxfs1991 commented 8 years ago

谢谢哈。有什么好的优化点都可以提出来，我整理一下。

SiZapPaaiGwat commented 8 years ago

感觉webpack还是很难取代gulp，有些功能在webpack中处理起来很自然（各种预处理的loader以及optimize、define等plugins），有些任务尤其是核心代码之外的感觉在gulp中更自然。

比如gulp-html-replace这个插件，做的工作其实和html-webpack-plugin差不多，但是这种任务其实和js/css代码关系不大，更多是核心代码之外的页面内容替换。当然强行放在webpack里面也可以，但是总感觉哪里不对（我的webpack.config.js本来就50行左右，这个一加配置至少十来行，可能还需要自己写点代码）。但是放在gulp里面就感觉超自然的一个任务。

cupools commented 8 years ago

编译慢的问题可以试试这个 webpack-hot-middleware，配合 webpack-dev-middleware 可以在文件改动时只编译相关的文件而不需要全部重新编译

dericgit commented 8 years ago

webpack 在使用extract-text-webpack-plugin 抽取出css时， css 中的相对路径会被改变

例：在app.vue 中 style 有 .shop {background: url('../images/experience/page1_background.jpg') center center no-repeat;}

在经过 new ExtractTextPlugin('./css/styles.[contenthash].css') 生成后文件目录： indx.html js/ css/style.[contenthash].css

.shop {background: url(./images/page1_background.jpg) center center no-repeat;}

lcxfs1991 commented 8 years ago

@dericgit 恩。应该是会根据你图片的生成路径去调整的。毕竟你src文件夹下面img和css的相对位置跟你最终生成的时候可能会不一样

FrendEr commented 8 years ago

请教一下个问题：如果我给 react 配置了别名

resolve: {
            extensions: ['', '.js', '.jsx', '.es6', 'css', 'scss', 'png', 'jpg', 'jpeg'],
            alias: {
                'react': path.join(NODE_MODULES_PATH, '/react/dist/react.js')
           }
}

但我的项目依赖的一个第三方库中的一个组件 module1.js 存在这样的引用

var PropTypes = require('react/lib/ReactPropTypes');

在我的项目编译的时候，就会出错

Module not found: Error: Cannot resolve 'file' or 'directory' myProject/node_modules/react/react.js/lib/ReactPropTypes in myProject/node_modules/thirdFrame/module1

那么，问题是：像这种配置别名的使用，如何做一个容错处理？毕竟第三方库如何引用一个文件是不可控的。

lcxfs1991 commented 8 years ago

目前确实没有办法。

不过开发环境直接设react的alias，react官方并不建议，因为有些warning和报错会没掉。

而生产环境的话，一般建议将react单独外链，可用externas : {react: React}

bluemsn commented 8 years ago

谢谢分享

zhouyupeng commented 8 years ago

早看到就好了解释的很详细和深入

draco1023 commented 8 years ago

谢谢分享

superfighter commented 8 years ago

看帖回帖是美德。

zhangbg commented 8 years ago

不错

nimoc commented 8 years ago

webpack-stream 开启 watch 模式后速度会快很多

johvin commented 8 years ago

很实用，mark

Joyeuxman commented 7 years ago

看帖回帖是美德。干货。

fly39244080 commented 7 years ago

我也觉得很不错，谢谢分享

iMacken commented 7 years ago

受益匪浅~ 👍

qxqxqxqx commented 7 years ago

mark

Emiya0306 commented 7 years ago

请问一下有没有关于在webpack编译之后，如何清除无用的thunk file文件的想法？

alwayrun commented 7 years ago

不错，谢谢分享

NowhereToRun commented 7 years ago

想请教一下怎么样能看到插件的依赖树呢？就是我这个插件会依赖的别的哪些插件还有具体版本

lcxfs1991 commented 7 years ago

@NowhereToRun 可以通过peerDependency来看？

NowhereToRun commented 7 years ago

@lcxfs1991 好像不是.. peerDependency是在配置里面指定插件版本吧？

我找到的是webpack是怎么管理插件的依赖树的，例如A插件里面引用了B、C、D插件，但是在写devDependencies时可能只会写到A， BCD插件是webpack自动下载下来了

lcxfs1991 commented 7 years ago

一般插件也主要是依赖webpack内置的插件，不过也有插件依赖loader的情况，例如html-res-webpack-plugin依赖html-loader，这个插件会在package.json指明。而如果是依赖内置插件的话，主要是通过peerDependency指定wepback版本即可。

NowhereToRun commented 7 years ago

@lcxfs1991 好的谢谢。我研究研究

7demo commented 7 years ago

遇到一个css注入后又注入个同名空的js现象。

我的入口文件：

entry: Object.assign(entries(), {
        vender: ["jquery"],
        common: getJsModule(),
        css1: [path.resolve(__dirname, 'src/scss/base/_base.scss')],
        css2: [path.resolve(__dirname, 'src/scss/index.scss'), path.resolve(__dirname, 'src/scss/home.scss')]
     })

其中vender，common分别是第三方打包文件与业务共同文件。css分别是基础样式文件与业务样式，这个地方我预编译后抽出来了。

这个是我页面模板的配置：

var conf = {
              filename: '../views/' + v + '.html',
              template: './src/views/' + v + '.html',
              chunks: ['vender', 'common', jsPath, 'css1', 'css2'], //为各个页面引入对应的
              chunksSortMode: 'dependency' //根据依赖顺序加载文件，否则会出现加载问题
          }
          config.plugins.push(new HtmlWebpackPlugin(conf));

此处是动态生成的，v代表每个页面的名字，每个页面我都会插入共同的js/css，还有自己的业务js---jsPath.

然而奇怪的是，我编译后，页面head除了出入两个css。在页面底部还分别注入了css1.js余css2.js。

这个多余的js文件是该如何去掉？还是我插入css有配置问题？

lcxfs1991 / blog