babel-loader
处理ES6+并将其编译为ES5
在安装时推荐使用以下命令：
npm install babel-loader @babel/core @babel/preset-env
// @babel/core 它是Babel编译器的核心模块
// @babel/preset-env 它是Babel官方推荐的预置器，可根据用户设置的插件和补丁来编译ES6+代码。
css-loader
读取css文件并编译成webpack能读取的模块。常与style-loader配合使用。
style-loader
将css的内容以<style>标签的形式注入javascript里。
html-loader
用于将HTML文件转化为字符串并进行格式化，这使得我们可以把一个HTML片段通过JS加载进来。
file-loader
生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
url-loader
功能类似于 file-loader，唯一的不同在于用户可以设置一个文件大小的阈值，当大于该阈值时与file-loader一样返回publicPath，而小于该阈值时则返回文件base64形式编码。
webpack配置：
rules: [
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 10240,
name: '[name].[ext]',
publicPath: './assets-path/',
},
},
}
],
ts-loader
用于连接Webpack与Typescript的模块。可使用以下命令进行安装：
npm install ts-loader typescript
webpack配置如下：
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
}
],
需要注意的是，Typescript本身的配置并不在ts-loader中，而是必须要放在工程目录下的tsconfig.json中。如：
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
},
},
handlebars-loader
handlebars-loader用于处理handlebars模板，在安装时要额外安装handlebars。
安装命令如下：
npm install handlebars-loader handlebars
vue-loader
用于处理vue组件，vue-loader可以将组件的模板、js及样式进行拆分。
安装命令如下：
npm i vue-loader vue vue-template-compiler css-loader
webpack配置如下：
rules:[
{
test: /\.vue$/,
use:'vue-loader',
}
]
