常用loader

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',
  }
]