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的功能被称为构建,也被成为编译,这种编译不是将源码编程机器码,而是将源码转成另一种语言。而真正运行这些目标代码的解释器是浏览器。