Webpack实践技巧与建议

在使用Webpack的过程中总结的一系列建议与技巧，不过需要注意的是这些小技巧都是关于Webpack 1的。Webpack 2与Webpack 1相比其API发生了较大变化，本文提及的不少技巧可能在Webpack 2并不能起作用。如果你想了解从Webpack 1迁移到Webpack 2的详细教程，可以参考这里，另外可以参考笔者的基于Webpack 2的模板 Webpack2-React-Redux-Boilerplate。

创新互联专注于企业营销型网站、网站重做改版、滨江网站定制设计、自适应品牌网站建设、H5响应式网站、成都做商城网站、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为滨江等各大城市提供网站开发制作服务。

进度反馈

可以在使用Webpack的时候添加如下选项:

 
 
 
      
  
  
  1. --progress --colors 
    2.

压缩

可以在进行生产环境构建时添加-p选项：

 
 
 
      
  
  
  1. webpack -p 
    2.

多模块分割

在设置output的文件名时可以使用[name].js多匹配名，如下的例子会生成a.js与b.js：

 
 
 
      
  
  
  1. module.exports = { 
    2.   
  
  
  2.   entry: { 
    3.   
  
  
  3.     a: './a', 
    4.   
  
  
  4.     b: './b' 
    5.   
  
  
  5.   }, 
    6.   
  
  
  6.   output: { filename: '[name].js' } 
    7.   
  
  
  7. } 
    8.

如果你担心代码重复的问题，可以使用CommonsChunkPlugin来抽取出多个输出文件的公共代码:

 
 
 
      
  
  
  1. plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ] 
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.

分割应用于渲染代码

同样是使用CommonsChunkPlugin来讲公共的渲染代码移动到vendor.js中:

 
 
 
      
  
  
  1. var webpack = require('webpack') 
    2.   
  
  
  2.  
    3.   
  
  
  3. module.exports = { 
    4.   
  
  
  4.   entry: { 
    5.   
  
  
  5.     app: './app.js', 
    6.   
  
  
  6.     vendor: ['jquery', 'underscore', ...] 
    7.   
  
  
  7.   }, 
    8.   
  
  
  8.  
    9.   
  
  
  9.   output: { 
    10.   
  
  
  10.     filename: '[name].js' 
    11.   
  
  
  11.   }, 
    12.   
  
  
  12.  
    13.   
  
  
  13.   plugins: [ 
    14.   
  
  
  14.     new webpack.optimize.CommonsChunkPlugin('vendor') 
    15.   
  
  
  15.   ] 
    16.   
  
  
  16. } 
    17.

其工作流程如下，具体可以参考Code Splitting:

  • 添加vendor入口并且指定关联库
  • CommonsChunkPlugin会从app.js中移除相关库
  • CommonsChunkPlugin 同样会把Webpack的运行时依赖迁移到vendor.js中

Source Maps

目前***的Source Maps选项是cheap-module-eval-source-map，这个工具会帮助开发环境下在Chrome/Firefox中显示源代码文件，其速度快于source-map与eval-source-map：

 
 
 
      
  
  
  1. const DEBUG = process.env.NODE_ENV !== 'production' 
    2.   
  
  
  2.  
    3.   
  
  
  3. module.exports = { 
    4.   
  
  
  4.   debug: DEBUG ? true : false, 
    5.   
  
  
  5.   devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map' 
    6.   
  
  
  6. } 
    7.

在Chrome Devtools你可以在webpack:///foo.js?a93h路径下查看文件，也可以选择自定义配置:

 
 
 
      
  
  
  1. output: { 
    2.   
  
  
  2.    devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]' 
    3.   
  
  
  3.  } 
    4.

CSS

作者正在编辑中，请过几日回来查看。

开发模式

如果你希望在仅仅在开发模式下开启某些选项:

 
 
 
      
  
  
  1. const DEBUG = process.env.NODE_ENV !== 'production' 
    2.   
  
  
  2.  
    3.   
  
  
  3. module.exports = { 
    4.   
  
  
  4.   debug: DEBUG ? true : false, 
    5.   
  
  
  5.   devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map' 
    6.   
  
  
  6. } 
    7.

这个时候你需要注意在编译生产环境版本时使用如下命令:env NODE_ENV=production webpack -p

包体组成分析

如果你觉得你的包体有点匪夷所思的大并且想具体了解到底是哪个模块占据了大量的提及，可以使用webpack-bundle-size-analyzer:

 
 
 
      
  
  
  1. $ yarn global add webpack-bundle-size-analyzer 
    2.   
  
  
  2.  
    3.   
  
  
  3. $ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer 
    4.   
  
  
  4. jquery: 260.93 KB (37.1%) 
    5.   
  
  
  5. moment: 137.34 KB (19.5%) 
    6.   
  
  
  6. parsleyjs: 87.88 KB (12.5%) 
    7.   
  
  
  7. bootstrap-sass: 68.07 KB (9.68%) 
    8.   
  
  
  8. ... 
    9.

优化React包体

React在开发模式下会自带开发工具，而我们希望在生产环境下能够移除该工具从而减少包体，我们可以通过如下配置:

 
 
 
      
  
  
  1. plugins: [ 
    2.   
  
  
  2.   new webpack.DefinePlugin({ 
    3.   
  
  
  3.     'process.env': { 
    4.   
  
  
  4.       'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
    5.   
  
  
  5.     } 
    6.   
  
  
  6.   }) 
    7.   
  
  
  7. ] 
    8.

优化Lodash

Lodash是非常不错的工具库，不过很多时候我们仅需要其一小部分功能，此时lodash-webpack-plugin就派上了用场:

 
 
 
      
  
  
  1. const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 
    2.   
  
  
  2.  
    3.   
  
  
  3. const config = { 
    4.   
  
  
  4.   plugins: [ 
    5.   
  
  
  5.     new LodashModuleReplacementPlugin({ 
    6.   
  
  
  6.       path: true, 
    7.   
  
  
  7.       flattening: true 
    8.   
  
  
  8.     }) 
    9.   
  
  
  9.   ] 
    10.   
  
  
  10. }; 
    11.

引用某个文件夹中的所有文件

如果你希望达到如下的效果:

 
 
 
      
  
  
  1. require('./behaviors/*') /* Doesn't work! */ 
    2.

你需要使用require.context:

// stackoverflow.com/a/30652110/873870

 
 
 
      
  
  
  1. function requireAll (r) { r.keys().forEach(r) }  
    2.   
  
  
  2. requireAll(require.context('./behaviors/', true, /\.js$/))s 
    3.

【本文是专栏作者“张梓雄 ”的原创文章，如需转载请通过与作者联系】

戳这里，看该作者更多好文

当前文章：Webpack实践技巧与建议
链接分享：http://www.mswzjz.cn/qtweb/news38/496188.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

解决方案知识

分类信息网

成都托管服务器　　 　成都广告招牌　　 　成都宣传画册设计　　 　营销网站建设　　 　达州网站建设　　 　成都租用服务器　　 　成都光华机房　　 　移动网站建设　　 　香港空间　　 　广汉锦华　　 　成都工商服务　　 　品牌网站建设　　 　南充服务器托管　　 　官网SEO排名　　 　重庆网站制作　　 　边坡柔性防护网　　 　广安园林绿化公司　　 　艾名斯智能　　 　双流做网站　　 　定制网站