zuzuchefe / guido Goto Github PK

• improve local server, support router and proxy
• support HMR
• not support ie8
• in the dev mode, the images and font files names don't contain hash
• remove the default eslint configuration, init cli project create eslint file
• temporarily compatible [email protected] watch mode bug,
  webpack/webpack.js.org#1096
  webpack/watchpack#25

同步 [email protected] 更新，顺便重构代码

Base Config

• 路径配置(paths)
• webpack.config.base
• eslintFormatter配置

ENV Run Script

Production Mode

• run node api
• webpack.config.prod

Development Mode

• run node api
• webpack.config.dev
• webpackDevServer.config

Module Types Feat

Script

• babel
• uglify
• eslint
• thread?

Styles

• scss
• inline mode、url mode
• css modules
• autoprefixer
• 雪碧图 from css code
• svg2font from css code
• extract-text-webpack-plugin => mini-css-extract-plugin

Image

• inline mode、url mode
• <=8kb 强制inline mode
• image-webpack-loader

Handlebars

• helperDirs 和 partialDirs 配置
• inlineRequires 规则

Fonts

• ttf|eot|woff|woff2 字体文件处理

SVG

• SVG Sprite generator for react
• SVG Sprite generator without react
• SVG inline mode and url mode
• SVG 压缩

html-webpack-plugins

• 资源按需、按模式替换注入
• 验证2.x的性能问题是否还存在？=> [email protected]

外部扩展

• browserslist
• uglifyjs
• eslint

思考

内配置模式

好处

• 手脚架升级方便
• 安装即用，配置一致，产出结果一致，减少差异化

坏处

• 外部扩展灵活性低，需从内部实现
• 有可能出现内外部配置冲突情况

生成预设配置模式

好处

• 灵活性高，开发者可自行根据需求自行任意修改

坏处

• 无法统一配置及后续升级

例如

guido依赖着 `node-sass` `phantomjs-prebuilt `等组件，若安装缓慢报错，[点我](./npm-install-fail)。

不加.md后缀，在 github.com 就跳到 404 了。

比如

.icon-level-1 {
  background-image: url(../images/level-1.png?__sprite1); //参数形式可以另外定
}
.icon-level-2 {
  background-image: url(../images/level-2.png?__sprite1);
}
.icon-level-3 {
  background-image: url(../images/level-2.png?__sprite2);
}

生成

.icon-level-1 {
  background-image: url(images/sprite-bbb.png);
  xxx
}
.icon-level-2 {
  background-image: url(images/sprite-bbb.png);
  xxx
}
.icon-level-3 {
  background-image: url(images/sprite-aaa.png);
  xxx
}

有时候可以避免首屏的图标载入太慢。
或者有特殊模块可以另外载入处理

Feature

• 构建性能提升（happpack）
• html-webpack-plugin支持自定义配置传入

Bugfix

• server模式下，模板的js不做 ?__inline 处理

文档：https://github.com/postcss/autoprefixer#options

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

多个css的在js里的引入顺序不同，就会提示这个警告，解决办法：

1. 修改出现问题的js中css文件顺序
2. 使用stats去掉warning

webpack-contrib/mini-css-extract-plugin#250

• 完美支持全局安装
• babel支持自定义配置

.....

1. v4.0.0 发布了吗， 可用于生产环境了？

2. v4里是可以扩展guido的webpack配置了？
   createWebpackConfig.js

if (TypeOf.isObject(appWebpackConfig)) {
	config = mergeWebpackConfig(config, appWebpackConfig);
	config = addModules(config);
} else if (TypeOf.isFunction(appWebpackConfig)) {
	config = addModules(config);
	config = appWebpackConfig(config);
}