一、常用 loader
JavaScript
相关,如下所示:
babel-loader
:把ES6
转换成ES5
;script-loader
:可以将指定的模块JavaScript
文件转成纯字符串通过eval
方式执行;exports-loader
:可以导出指定的对象,例如window.Zepto
;ts-loader
:把TypeScript
转换成JavaScript
;imports-loader
:将任意三方的对象添加到window
对象中。
- 样式相关,如下所示:
style-loader
:把CSS
代码注入到JavaScript
中,通过DOM
操作去加载CSS
;css-loader
:加载CSS
,支持模块化、压缩、文件导入等特性;postcss-loader
:CSS
后处理器postcss
的loader
;less-loader
:把less
代码转换成CSS
代码;sass-loader
:把SCSS/SASS
代码转换成CSS
代码;fast-sass-loader
:并行处理SCSS/SASS
文件,比Sass-loader
快5~10
倍的loader
;stylus-loader
:把Stylus
代码转换成CSS
代码;mini-css-extract-plugin
的loader
:将CSS
样式内容提取到CSS
文件中。
- 静态资源相关,如下所示:
raw-loader
:把文本文件的内容加载到代码中去;file-loader
:把文件输出到一个文件夹中,在代码中通过相对URL
去引用输出的文件;url-loader
:和file-loader
类似,但是能在文件很小的情况下以base64
的方式把文件内容注入到代码中去;html-loader
:HTML
语法的loader
,可以处理HTML
中的图片、CSS
等;svg-url-loader
:把压缩后的SVG
内容注入到代码中;markdown-loader
:把Markdown
文件转换成HTML
;ejs-loader
:把EJS
模版编译成函数返回;pug-loader
:把Pug
模版转换成JavaScript
函数返回;image-webpack-loader
:加载并且压缩图片文件;csv-loader
:加载csv
文件内容;xml-loader
:加载xml
文件内容。
- 工程相关,如下所示:
eslint-loader
:通过ESLint
检查JavaScript
代码;tslint-loader
:通过TSLint
检查TypeScript
代码;mocha-loader
:加载Mocha
测试用例代码。
- 其他,如下所示:
vue-loader
:加载Vue.js
单文件组件。
二、常用 plugin
Webpack
内置的插件,如下所示:
webpack.DefinePlugin
:定义全局常量插件;webpack.EnvironmentPlugin
:定义环境变量插件;webpack.BannerPlugin
:在代码中添加版权注释等;webpack.DllPlugin
:使用DLL
思想来加快编译速度的插件;webpack.HashedModuleIdsPlugin
:可以修改文件Hash
算法的插件;webpack.optimize.SplitChunksPlugin
:代码拆分优化插件;webpack.HotModuleReplacementPlugin
:开启模块热替换功能,通过监听文件变化并自动加载被修改的文件来减少烦人的浏览器手动重新加载;webpack.ProgressPlugin
:构建进度插件;webpack.ProvidePlugin
:自动加载模块,例如出现$
则加载jQuery
等常用库;webpack.IgnorePlugin
:用于忽略部分文件
- 非内置的插件,如下所示:
mini-css-extract-plugin
:CSS
文件提取,并且在生产环境构建是可以用于优化CSS
文件大小;optimize-css-assets-webpack-plugin
:压缩CSS
文件;clean-webpack-plugin
:在编译之前清理指定目录指定内容;html-webpack-plugin
:html
插件,可以根据JavaScript
模板文件生成HTML
;preload-webpack-plugin
:html-webpack-plugin
的插件,给页面添加<link rel="preload">
资源;i18n-webpack-plugin
:帮助网页做国际化的插件;webpack-manifest-plugin
:生成Webpack
打包文件清单的插件;html-webpack-inline-source-plugin
:在HTML
中内联打包出来的资源;webpack-bundle-analyzer
:webpack bundle
分析插件;copy-webpack-plugin
:文件拷贝插件,可以指定文件夹的文件复制到output
文件夹,方便打包上线;terser-webpack-plugin
:JavaScript
代码压缩插件,这个插件兼容ES6
语法,推荐使用这个插件,而不是用 uglifyjs;serviceworker-webpack-plugin
:生成PWA service worker
插件;hard-source-webpack-plugin
:通过缓存提升非首次编译速度;friendly-errors-webpack-plugin
:减少Webpack
无用的构建log
;stylelint-webpack-plugin
:StyleLint
的插件。