Open LLwanran opened 5 years ago
以下是我平时常用的（只是每样列举大概10个，毕竟数量太多了） ——
依赖处理器，拦截依赖项并进行预处理
file-loader
url-loader
babel-loader
style-loader
css-loader
postcss-loader
vue-loader
vue-style-loader
svg-sprite-loader
eslint-loader
less-loader
sass-loader
stylus-loader
Loader不够用/不好用或者做不到的时候，通过自定义插件来扩展
copy-webpack-plugin
uglifyjs-webpack-plugin
UglifyES
ES6
html-webpack-plugin
extract-text-webpack-plugin
optimize-css-assets-webpack-plugin
webpack-bundle-analyzer
clean-webpack-plugin
progress-bar-webpack-plugin
friendly-errors-webpack-plugin
happypack
以下是我平时常用的（只是每样列举大概10个，毕竟数量太多了） ——
Loaders
依赖处理器，拦截依赖项并进行预处理
file-loader- 把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件url-loader- 和file-loader类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去babel-loader- 把 ES6 转换成 ES5style-loader- 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSScss-loader- 加载 CSS，支持模块化、压缩、文件导入等特性postcss-loader- 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后vue-loader- 解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理vue-style-loader- 用来处理 .vue 文件中 style 中的内容, 是 webpack 的官方 style-loader 的 forksvg-sprite-loader- 根据导入的 svg 文件自动生成 symbol 标签并插入 htmleslint-loader- 通过 ESLint 检查 JavaScript 代码less-loader、sass-loader、stylus-loaderPlugins
Loader不够用/不好用或者做不到的时候，通过自定义插件来扩展
copy-webpack-plugin- 用来将单个文件或者整个目录拷贝到build目录uglifyjs-webpack-plugin- 通过UglifyES压缩ES6代码html-webpack-plugin- 根据模板自动生成html代码，并自动引用css和js文件extract-text-webpack-plugin- 将js文件中引用的样式单独抽离成css文件optimize-css-assets-webpack-plugin- 不同组件中重复的css可以快速去重webpack-bundle-analyzer- 一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示clean-webpack-plugin- 清除文件progress-bar-webpack-plugin- 编译进度条friendly-errors-webpack-plugin-可以识别某些特定的webpack错误，并优化它们来提供一个更好的开发环境happypack- 通过多进程模型，来加速代码构建