Webpack 实践技巧与建议
来源:互联网 发布:电子书签制作软件 编辑:程序博客网 时间:2024/06/05 19:06
Webpack 实践技巧与建议翻译自webpack-tricks,从属于笔者的Web Frontend Introduction And Best Practices:前端入门与最佳实践。如果想了解更多的编程技术体系概况可以参考2016:我的技术体系结构图,如果想及时了解一周优秀外文资料可以参考某熊周刊系列:一周推荐外文技术资料(12.1)。
本文是笔者在使用Webpack的过程中总结的一系列建议与技巧,不过需要注意的是这些小技巧都是关于Webpack 1的。Webpack 2与Webpack 1相比其API发生了较大变化,本文提及的不少技巧可能在Webpack 2并不能起作用。如果你想了解从Webpack 1迁移到Webpack 2的详细教程,可以参考这里,另外可以参考笔者的基于Webpack 2的模板 Webpack2-React-Redux-Boilerplate。
进度反馈
可以在使用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') ]<script src='init.js'></script><script src='a.js'></script>
分割应用于渲染代码
同样是使用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-analyzerjquery: 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
延伸阅读:
- 知乎专栏:某熊的全栈之路
- 知乎专栏:前端当自强
- lotuc
- 2016-我的技术之路:编程知识体系结构
- 2016-我的前端之路:工具化与工程化
- Webpack 实践技巧与建议
- Webpack 实践技巧与建议
- WordPress 安全建议与技巧
- webpack实践指南
- webpack基础实践1
- webpack基础实践2
- webpack项目实践
- Webpack入门实践
- scss实践 webpack立方体
- Vue + webpack 项目实践
- vue 快速入门与最佳实践(vue-cli, webpack, vue 最佳实践)
- webpack使用小技巧
- 关于加强学生课外科技活动与实践能力的建议
- Solr SpellCheckComponent(拼写建议组件)实践与分析
- 数据仓库建模与ETL实践技巧
- 数据仓库建模与ETL实践技巧
- 数据仓库建模与ETL实践技巧
- 数据仓库建模与ETL实践技巧
- Unable to connect to the MKS: Login (username / password) incorrect
- OpenCV--入门
- invalid derived query的解决办法
- VS2013自带的Browser Link功能引发浏览localhost网站时不停的轮询
- vue.js安装及之注意事项
- Webpack 实践技巧与建议
- 图像积分图代码实现(c代码)
- 中金所 最大子数组和
- 冒泡排序
- 想要设计gulp & webpack构建系统?看这儿!
- (二叉树z字形层次遍历)LeetCode#103. Binary Tree Zigzag Level Order Traversal
- MD5加密
- OSG中使用Qt做界面
- 为eclipse安装python、shell开发环境和SVN插件