webpack4 代码去重,简化信息和构建优化(五)

原创 Lin_Grady 教程 webpack 162阅读 2019-04-16 11:09:36 举报

前言

之前一段时间工作原因把精力都放在小程序上,趁现在有点空闲时间,刚好官方文档也补充完整了,我准备重温一下 webpack 之路了,因为官方文档已经写得非常详细,我会大量引用原文描述,主要重点放在怎么从零构建 webpack4 代码上,这不是一个系统的教程,而是从零摸索一步步搭建起来的笔记,所以前期可能bug会后续发现继续修复而不是修改文章.

webpack4从零开始构建(一)
webpack4+React16项目构建(二)
webpack4功能配置划分细化(三)
webpack4引入Ant Design和Typescript(四)
webpack4 代码去重,简化信息和构建优化(五)

2019/04/16上传,代码同步到引入antd webpack4_demo_antd

抽取配置参数

同级目录新建文件env.js文件,我们将一些环境变量和配置变量独立开来,尽量不耦合进webpack文件里.如下所示

webpack.common.js

相关变量替换如下:

进度条展示

目测没啥用处,求个视觉效果吧

定义环境变量

new webpack.DefinePlugin({
  'process.env.project': 'demo'
}),

plugins部分最终代码如下:

输出信息

我们可以自定义webpack打包的输出信息,因为比较多字段,所以同级目录新增stats.js文件,具体似乎出看自己需求自由改动吧

禁止体积警告

设置后不影响打包,只是不会提示

完整代码

rules.js

原本代码充斥很多重复代码,将他们提取出来

因为现在已经有awesome-typescript-loader处理,所以我们可以将js规则去掉.同时默认会禁止babel,如果需要的话可以配置babelOptions

webpack.server.js

我们稍微再细致一下配置,修改如下

生产构建优化

当前配置代码如下

可以看出构建文件和耗费时间

删除映射

提供公共库

简单将node_modules和业务代码分开

结果如下

引入webpack-parallel-uglify-plugin

这插件能为多入口文件启用多线程构建,提高打包速度,这里demo比较简单暂时用不到,但是我们可以利用他做一些特殊处理

最终代码

打包结果

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复