https://webpack.js.org/concepts/modules/#what-is-a-webpack-module
webpack supports modules written in a variety of languages and preprocessors, via loaders. Loadersdescribe to webpack how to process non-JavaScript modules and include these dependencies into your bundles.
webpack，主要是为了解决前端模块化的问题，它的作用是使用各种loader对使用不同语言、预处理器写的模块文件编译成浏览器兼容的前端代码。webpack通过各种插件起作用，例如将es2015语法转成前端兼容的js语法需要通过babel，Sass样式转成普通的css样式代码需要使用sass插件，而为了解析vue格式的代码，则需要使用vue-loader进行解析。
vue-cli扮演的角色就是针对使用vue框架开发的场景提供许多便利的功能，也就是所谓的脚手架。其中重要的功能配置好了webpack以及编译vue程序源码所需的各种插件（包括vue-loader）。有了vue-cli就省去了配置各种预处理器插件的繁琐工作。
前面提到的语言/预处理器实际上是一种语法，语言包括：TypeScript、CoffeeScript、ES6语法等，预处理器包括Sass、Less、Stylus。在这里所谓的预处理器不是一种实体，而是约定/规范，跟编程语言的规格说明一样，与其实现是独立的。就好比python的代码可以用cpython/jython/pypi等不同的解释器运行一样。
也就是说，只要你能提供相应的loader插件，你也可以按照自己的想法实现预处理器语法。
上述webpack的功能被称为构建，也被成为编译，这种编译不是将源码编程机器码，而是将源码转成另一种语言。而真正运行这些目标代码的解释器是浏览器。
原文：https://www.cnblogs.com/zhangjpn/p/11285689.html