webpack常见插件和loader及作用

loader

webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。

常见loader

• style-loader：将CSS添加到DOM的内联样式标签style里
• css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码
• less-loader：处理less
• sass-loader：处理sass
• postcss-loader：用postcss来处理CSS
• file-loader：分发文件到output目录并返回相对路径
• url-loader 和 file-loader 类似，但是当文件小于设定的limit时可以返回一个Data Url
• html-minify-loader：压缩HTML文件
• babel-loader：把ES6文件转换成ES5文件

plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

常见插件

• html-webpack-plugin：会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中
• webpack-dev-server：启动一个本地临时的服务器，可以设置端口，支持热更新
• clean-webpack-plugin：每次打包之前先将指定的文件夹清空再生成新的文件
• copy-webpack-plugin：打包相关的文档（如word等）。文档内容是固定不变的, 只需要将对应的文件拷贝到打包目录中即可
• commons-chunk-plugin：提取公共代码
• define-plugin：定义环境变量