- 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 模式。
- 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.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
- webpack-dev-middleware:webpack-dev-middleware 是一个封装器(wrapper),它可以把 webpack 处理过的文件发送到一个 server。
- webpack-hot-middleware:模块热重载中间件。
- webpack-build-notifier:构建结果弹窗通知。
- friendly-errors-webpack-plugin:webpack 构建过程添加友好的错误提示。
- html-webpack-plugin:在指定的 template 中动态插入 js 变量、通过内置变量动态生成/插入标签、压缩 html 格式。
- progress-bar-webpack-plugin
- mini-css-extract-plugin:分离 css 至单独文件
- hard-source-webpack-plugin:提供初次构建中间缓存步骤,加快再次构建的速度。
- optimize-css-assets-webpack-plugin
- uglifyjs-webpack-plugin:压缩 js 代码。
- webpack-parallel-uglify-plugin:并行压缩 js 代码,提高效率。
- add-asset-html-webpack-plugin
- sw-precache-webpack-plugin
- webpack-parallel-uglify-plugin
- webpack-bundle-analyzer
- copy-webpack-plugin:拷贝静态资源。
- progress-bar-webpack-plugin:构建进度条。