Skip to content

GavinLam164/webpack-cli-demo

Repository files navigation

webpack-demo

代码风格

library

  • webpack-merge:合并 webpack 配置,抽取 development/production 公共配置。
  • ora:转圈动画
  • chalk
  • rimraf:支持命令行删除。
  • happypack
  • semver
  • eventsource-polyfill:支持 http 事件通信,该项目用于自动刷新页面。
  • http-proxy-middleware:本地 http 代理插件。
  • portfinder:在默认端口被占用的情况下,往后查找空闲端口并返回空闲的端口号。
  • require-nocache
  • uglify-es
  • opn
  • connect-history-api-fallback
  • cross-env:屏蔽开发所处操作系统差异,提供一致的设置 Node 环境变量的命令。
  • lint-staged
  • happypack:支持部分 loader 进行并行的资源处理,不再继续维护,可 wepback4 和 thread-loader 进行替换。
  • autoprefixer:css 自动添加浏览器兼容前缀,配合 postcss-loader 使用。
  • connect-history-api-fallback:支持 h5 history 模式。

loader

  • url-loader
  • style-loader
  • postcss-loader
  • css-loader
  • vue-loader
  • vue-style-loader
  • sass-loader
  • scss-loader
  • babel-loader
  • file-loader
  • vg-sprite-loader
  • eslint-loader
  • thread-loader

webpack plugin

内置插件

  • webpack.HashedModuleIdsPlugin/webpack.HashedModuleIdsPlugin:这是因为每个 module.id 会默认地基于解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变。这两个插件可以保证输出文件名的一致性以便于缓存。
  • webpack.optimize.ModuleConcatenationPlugin: 在构建过程中控制作用域提升,提升代码在浏览器中的执行速度
  • webpack.optimize.SplitChunksPlugin:分割文件
  • webpack.DefinePlugin
  • webpack.HotModuleReplacementPlugin
  • webpack.NoEmitOnErrorsPlugin:在编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
  • webpack.optimize.ModuleConcatenationPlugin
  • webpack.DllPlugin:在构建前预先对第三方库进行构建,创建一个只有 dll 的 bundle(dll-only-bundle) 和与之对应的 manifest.json,用于 DLLReferencePlugin 映射到相关的依赖上去的。
  • webpack.DllReferencePlugin:通过引用 webpack.DllPlugin 生成的 manifest.json,避免第三方库的重复构建。
  • autodll-webpack-plugin:以上两个插件的结合简化版本。
  • webpack.LoaderOptionsPlugin

社区插件

git约束

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages