Webpack实践技巧与建议

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

成都创新互联-专业网站定制、快速模板网站建设、高性价比瀍河网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式瀍河网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖瀍河地区。费用合理售后完善，十年实体公司更值得信赖。

进度反馈

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

 
 
 

  
  
  
--progress --colors
 
 
 

压缩

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

 
 
 

  
  
  
webpack -p
 
 
 

多模块分割

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

 
 
 

  
  
  
module.exports = {
  
  
  
  entry: {
  
  
  
    a: './a',
  
  
  
    b: './b'
  
  
  
  },
  
  
  
  output: { filename: '[name].js' }
  
  
  
}
 
 
 

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

 
 
 

  
  
  
plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]
  
  
  

  
  
  

 
 
 

分割应用于渲染代码

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

 
 
 

  
  
  
var webpack = require('webpack')
  
  
  

  
  
  
module.exports = {
  
  
  
  entry: {
  
  
  
    app: './app.js',
  
  
  
    vendor: ['jquery', 'underscore', ...]
  
  
  
  },
  
  
  

  
  
  
  output: {
  
  
  
    filename: '[name].js'
  
  
  
  },
  
  
  

  
  
  
  plugins: [
  
  
  
    new webpack.optimize.CommonsChunkPlugin('vendor')
  
  
  
  ]
  
  
  
}
 
 
 

其工作流程如下，具体可以参考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：

 
 
 

  
  
  
const DEBUG = process.env.NODE_ENV !== 'production'
  
  
  

  
  
  
module.exports = {
  
  
  
  debug: DEBUG ? true : false,
  
  
  
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
  
  
  
}
 
 
 

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

 
 
 

  
  
  
output: {
  
  
  
    devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
  
  
  
  }
 
 
 

CSS

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

开发模式

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

 
 
 

  
  
  
const DEBUG = process.env.NODE_ENV !== 'production'
  
  
  

  
  
  
module.exports = {
  
  
  
  debug: DEBUG ? true : false,
  
  
  
  devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
  
  
  
}
 
 
 

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

包体组成分析

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

 
 
 

  
  
  
$ yarn global add webpack-bundle-size-analyzer
  
  
  

  
  
  
$ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer
  
  
  
jquery: 260.93 KB (37.1%)
  
  
  
moment: 137.34 KB (19.5%)
  
  
  
parsleyjs: 87.88 KB (12.5%)
  
  
  
bootstrap-sass: 68.07 KB (9.68%)
  
  
  
...
 
 
 

优化React包体

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

 
 
 

  
  
  
plugins: [
  
  
  
  new webpack.DefinePlugin({
  
  
  
    'process.env': {
  
  
  
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  
  
  
    }
  
  
  
  })
  
  
  
]
 
 
 

优化Lodash

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

 
 
 

  
  
  
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
  
  
  

  
  
  
const config = {
  
  
  
  plugins: [
  
  
  
    new LodashModuleReplacementPlugin({
  
  
  
      path: true,
  
  
  
      flattening: true
  
  
  
    })
  
  
  
  ]
  
  
  
};
 
 
 

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

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

 
 
 

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

你需要使用require.context:

// http://stackoverflow.com/a/30652110/873870

 
 
 

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

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

文章名称：Webpack实践技巧与建议
转载注明：http://www.mswzjz.cn/qtweb/news32/134332.html

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

广告

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