191220&webpack常用plugin/loader

webpack常用plugin/loader

• html-webpack-plugin
• mini-css-extract-plugin
• autodll-webpack-plugin
• uglifyjs-webpack-plugin
• copy-webpack-plugin
• git-revision-webpack-plugin
• webpack-dev-middleware
• webpack-hot-middleware
• babel-loader
• url-loader
• svg-inline-loader
• style-loader
• css-loader
• less-loader
• file-loader
• eslint-loader

html-webpack-plugin

自动生成index.html

2个作用

• 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
• 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

mini-css-extract-plugin

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap

autodll-webpack-plugin

能够快速打包，能把第三方依赖的文件能提前进行预编译打包到一个文件里面去

uglifyjs-webpack-plugin

用来缩小（压缩优化）js文件，至少需要Node v6.9.0和Webpack v4.0.0版本

copy-webpack-plugin

用来复制，script引用的 第3方插件 至打包目录

git-revision-webpack-plugin

基于本地git存储库生成版本和COMMITHASH文件的简单webpack插件

webpack-dev-middleware

解决每次改动文件都要去重新编译，对更改的文件进行监控，和 webpack-hot-middleware 配合使用，实现热加载功能

webpack-hot-middleware

webpack-hot-middleware 是和 webpack-dev-middleware 配套使用的，实现热加载功能

babel-loader

这个包允许使用Babel和webpack 转译成浏览器识别的 JavaScript文件

url-loader

将文件加载为base64编码的URL, 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

svg-inline-loader

webpack 加载SVG

style-loader

通过注入<style>标记向DOM添加CSS

css-loader

解析后缀名为.css的文件

less-loader

编译less文件为css样式

使用css加载程序或原始加载程序将其转换为JS模块，使用ExtractTextPlugin将其提取为单独的文件。

file-loader

webpack中引入图片的解决方案。

eslint-loader

webpack 引入 eslint 代码检测工具

参考

webpack4 之html-webpack-plugin
[插件2] mini-css-extract-plugin
深入浅出的webpack构建工具—AutoDllPlugin插件(八)
UglifyjsWebpackPlugin
UglifyJS Webpack Plugin
关于 copy-webpack-plugin 的用处和使用
git-revision-webpack-plugin
webpack-dev-middleware 插件的使用
webpack-hot-middleware解读
babel-loader
url-loader
Webpack实战-加载SVG
style-loader
css-loader&style-loader
less-loader
file-loader与url-loader的区别
webpack引入eslint详解
eslint用户指南
eslint-loader