webpack的loader和plugin的区别

【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，而且在buld中引入这些依赖。loader能够将文件从不一样的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。好比说：CSS-Loader，Style-Loader等。

loader的使用很简单：

在webpack.config.js中指定loader。module.rules能够指定多个loader，对项目中的各个loader有个全局概览。

loader是运行在NodeJS中，能够用options对象进行配置。plugin能够为loader带来更多特性。loader能够进行压缩，打包，语言翻译等等。

loader从模板路径解析，npm install node_modules。也能够自定义loader，命名XXX-loader。

语言类的处理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何开发技术栈均可以使用webpack。

【Plugin】：目的在于解决loader没法实现的其余事，从打包优化和压缩，到从新定义环境变量，功能强大到能够用来处理各类各样的任务。webpack提供了不少开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，致使加载时间过长，是一把优化的利器。而在多页面应用中，更是可以为每一个页面间的应用程序共享代码建立bundle。

webpack功能强大，难点在于它的配置文件，webpack4默认不须要配置文件，能够经过mode选项为webpack指定了一些默认的配置，mode分为：development/production，默认是production。

插件能够携带参数，因此在plugins属性传入new实例。

【Mode】能够在config文件里面配置，也能够在CLI参数中配置：webpack --mode=production（通常会选择在CLI，也就是npm scripts里面进行配置）。

在webpack4如下版本，webpack3.XX，经过plugins进行环境变量的配置。

【resolve】模块，resolver是个库，帮助webpack找到bundle须要引入的模块代码，打包时，webpack使用enhanced-resolve来解析路径。 

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

 【Manifest】管理全部模块之间的交互。runtime将可以查询模块标识符，检索出背后对应的模块。

问题1：webpack经过使用bundle计算content hash做为文件名称，文件修改，新的content hash执向新的文件，缓存无效，可是文件内容没有修改，计算的hash仍是会改变，由于，runtime和manifest的注入在每次构建都会发生变化。要想解决这个文件能够了解更多的runtime和manifest。

webpack原理：从配置文件定义的模块列表开始，处理应用程序，从入口文件开始递归构建一个依赖图，而后将全部模块打包为少许的bundle，一般只有一个，可由浏览器加载。