《五》Webpack 中处理 JavaScript 模块的 Loader 之 vue-loader、ts-loader、eslint-loader

原创已于 2025-02-14 19:22:25 修改 · 871 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack

于 2023-09-22 16:45:13 首次发布

Webpack 专栏收录该内容

34 篇文章

订阅专栏

文章讲述了如何在Vue2项目中安装和配置vue-loader处理Vue文件，以及如何使用ts-loader处理TypeScript文件和eslint-loader进行ESLint代码校验，包括在webpack配置中的应用和tsconfig.json的使用。

`vue-loader`：

安装的是 Vue2 和 vue-loader15。

安装 Vue：npm install vue。

新建 src/js/App.vue 文件并编写代码。

// src/js/App.vue
<template>
	<div>{{title}}</div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello Vue'
      }
    }
  }
</script>

<style scoped></style>

新建 src/index.js 文件并编写代码。

// src/index.js
import Vue from 'vue'
import App from './js/App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

运行 npx webpack 命令进行打包，会发现报错了，Webpack 不认识 Vue 文件。

使用 `vue-loader`：

vue-loader：对 Vue 文件进行转换。

安装 vue-loader：npm install vue-loader --save-dev。
由于还需要对 Vue 文件中的 template 模板进行编译，因此还需要安装 vue-template-compiler：npm install vue-template-compiler --save-dev。

在 webpack.config.js 配置文件中进行配置。

// webpack.config.js
// VueLoaderPlugin 插件在安装 vue-loader 时会被默认安装
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      }
    ]
  },
  plugins: [
  	// 使用 vue-loader 必须同时使用 VueLoaderPlugin 插件，才能对 Vue 文件正确处理。它的作用是将 Vue 单文件组件中的各个部分进行解析和转换，将 template 模板编译为渲染函数，将 script 脚本使用 Babel 进行转译，将 style 样式转换为适当的模块
    new VueLoaderPlugin()
  ]
}

此时，运行 npx webpack 命令进行打包，会发现打包成功了。

`ts-loader`：

新建 src/index.ts 并编写代码。

// src/index.ts
var title:string = 'Hello World'

function getInfo (info: string) {
    console.log(info)
}
getInfo(title)

修改 Webpack 打包的入口文件。

// webpack.config.js
module.exports = {
    entry: './src/index.ts',
}

运行 npx webpack 命令进行打包，会发现报错了，Webpack 不认识 TypeScript 语法。

使用 `ts-loader`：

ts-loader ：会自动去使用 TypeScript Compiler 对匹配到的 TypeScript 进行编译转换。

安装 ts-loader：npm install ts-loader --save-dev。

在 webpack.config.js 配置文件中进行配置。

// webpack.config.js
module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
            }
        ]
    }
}

当想要对项目中所有的 TS 文件都进行统一的编译时，必须要有一个 TS 的配置文件 tsconfig.json 。因此，运行 tsc --init 命令来生成 tsconfig.json。
此时，运行 npx webpack 命令进行打包，会发现打包成功了。

`eslint-loader`：

新建 src/index.js 文件并编写代码。
```
const title = "Hello World";
```

使用 `eslint-loader`：

eslint-loader：对代码进行 ESLint 校验。

安装 ESLint：npm install eslint --save-dev。
生成 ESLint 配置文件：npx eslint --init。
安装 eslint-loader：npm install eslint-loader --save-dev。

在 webpack.config.js 配置文件中进行配置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 如果使用了多个 loader，是从后往前执行的。因此，如果对 JS  文件还使用了其他 loader 进行处理，可以将 eslint-loader 放到最后，使其在处理代码之前先对代码进行 ESLint 校验
        use: ['eslint-loader'], 
      }
    ]
  },
}