feflow/builder-webpack4

腾讯IVWEB团队使用的基于Webpack4的业务开发构建器

English | 简体中文

Feflow

🚀 A tool aims to improve front-end engineer workflow and standard, powered by TypeScript.

Introduction

Feflow is an engineering solution of Tencent's open source front-end field, which is committed to improving development efficiency and specification.

Getting Started

Let's start by installing Feflow with npm.

npm install @feflow/cli -g

There are three kinds of commands in Feflow

• Native Commands
  • fef config
  • fef help
  • fef info
  • fef install
  • fef uninstall
  • fef list

You can write a Feflow devkit or plugin to extends commands.

More detail document can be found:

• Github Wiki
• Website

Change Log

This project adheres to Semantic Versioning. Every release, along with the migration instructions, is documented on the GitHub Releases page.

License

MIT

builder-webpack4's Issues

需要能够支持指定 page 开启 rem

通过配置 usePx2rem 参数，可以开启 rem 支持，但是有些场景下，我们的某些 page 不需要开启，例如在 ipad 场景和pc场景；因此，需要支持区分页面来开启 rem

webpack4构建器分工

任务名称	负责人	开发状态	如何升级	完成时间
html-webpack-plugin	tickli	完成	平滑升级到4.0.0-beta.1	2018.10.10
extract-text-webpack-plugin	erwinliu	完成	mini-css-extract-plugin替代	2018.10.10
clean-webpack-plugin	leoytliu	完成	平滑升级到0.1.19	2018.10.10
html-webpack-externals-plugin	lewischeng	完成	平滑升级到1.1.0-rc.7	2018.10.10
html-inline-css-webpack-plugin	tickli	完成	代替 html-webpack-inline-source-plugin	2018.10.11
replace-bundle-webpack-plugin	erwinliu	完成	插件已移除	2018.10.10
html-string-replace-webpack-plugin	leoytliu	完成	已移除，原来是为了替换html中的cdn目录问题，现在不用了	2018.10.10
string-replace-webpack-plugin	lewischeng	开发中
webpack-subresource-integrity	tickli	完成	平滑升级到1.1.0	2018.10.11
offline-webpack-plugin	erwinliu	完成	通过改写 API 支持 webpack 4	2018.10.10
Happypack	lewischeng	完成	使用thread-loader替代	2018.10.10
webpack-parallel-uglify-plugin	tickli	完成	目前的uglifyjs-webpack-plugin可以通过配置parallel=true直接支持
webpack-deep-scope-analysis-plugin	leoytliu	开发中
SSR插件开发	lewischeng	开发中
Prerender插件开发	leoytliu	开发中
PWA插件开发	tickli	开发中
支持optional chaining语法糖	lewischeng	开发中
废弃对Sass支持，仅支持Less	erwinliu	完成	已经去掉

开发环境使用的16.2.0版react在移动端使用React.Fragment会报错

开发环境使用的cdn版react 16.2.0（//s.url.cn/now/lib/16.2.0/react.js），当项目中有使用<React.Fragment/>时，在移动端访问页面会报错：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

然而此时在pc端并不会报错。如果换成压缩版（//s.url.cn/now/lib/16.2.0/react.min.js?_bid=3234），则在移动端访问也不会报错。

希望构建打包时能去除冗余CSS代码

构建出来的react依赖script内integrity为null

支持prerender

希望支持prerender功能，可以参考prerender-spa-plugin

离线包插件支持webpack4

资源目录结构根据这个PR已支持

目前测试用例通过2/3，只剩离线包插件支持webpack4。

建议构建器支持生产环境开启sourcemap生成

webpack版本导致mini-css-extract-plugin出现错误

虽然builder-webpack4已经指定版本"webpack": "^4.20.2"
但是在构建中我们的webpack版本为.feflow目录中node_modules的版本，这个版本低于4
这样会导致出现如下错误

相关issue已经提到是因为webpack版本问题
#webpack-contrib/mini-css-extract-plugin#69

所以我们需要找到一种方式能够让feflow使用builder中依赖的webpack，否则feflow永远只有一个版本的webpack可以用。

scss支持

有些老项目迁移（涉及mixin、变量命名等）需要支持scss编译

支持图片inline

支持图片自动转换成base64格式inline

typescript的支持

1. 现在还在用happypack连接ts-loader支持ts，需要改为thread-loader，并且加上fork-ts-checker-webpack-plugin
2. 测试用的项目无论是这个项目里面还是now那个项目，都还没有ts文件，这个测试用例没测到，需要补充
3. ts-loader需要配置tsconfig，需要脚手架支持

希望可以支持不开启cdn的模式

希望可以支持不开启cdn的模式
比如在 builderOptions 中传 cdn: '' 就可以默认不使用cdn

支持feflow.json alias配置

css module

i want use css module,but its not support.

通过绝对路径索引的图片没有被正确打包

feflow支持的绝对路径

/assets/images/xxx/aaa.png === /src/assets/images/xxx/aaa.png

实际按照左侧写法后打包时图片并没有被装进包中

引用的方法：

background: url('/assets/images/xxx/aaa.png');

inline的CSS没有压缩

对应的业务链接：http://qun.qq.com/qunpay/activity/goldpig/index.html?_wv=49152&_wwv=4