webpack中loader和plugin的区别

loader

由于webpack只能打包commonJs的规范文件，所以针对图片、css等文件无法打包，loader专注于转化文件，完成压缩/打包/语言翻译等

• css-loader sass-loader和style-loader是为了打包css
• bable-loader和babel-core是为了把es6的代码转换成es5
• url-loader和file-loader img-loader是为了把图片进行打包
• eslint-loader某路径下的文件开启eslint
  

Plugin

也是为了扩展webpack，作用于webpack本身：打包、优化、压缩、重新定义环境变量

• clean-webpack-plugin 打包后文件放到dist文件前 先将dist文件清空，保证每次的内容都是最新的
  

• html-webpack-plugin用于html文件的拷贝、打包,往我们的dist目录中生成一个index.html文件，并将我们打包的js文件引入到这个html中

• webpack.DefinePlugin 定义全局变量

• webpack.NamedModulesPlugin 热加载时直接返回文件名而不是文件id（HMR shows correct file names in console on update.
  ）

• NoEmitOnErrorsPlugin 编译出错时跳过输出阶段

• copyWebpackPlugin将文件或目录整个复制到构建目录

• HotModuleReplacementPlugin 热模块自动替换插件，需要配合着webpack-dev-server进行使用，在打包文件发生改变的时候自动进行重新打包