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

vue-loader：

安装的是 Vue2 和 vue-loader15。

1. 安装 Vue：npm install vue。
2. 新建 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>
   

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

   // src/index.js
   import Vue from 'vue'
   import App from './js/App.vue'
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')
   

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

使用 vue-loader：

vue-loader：对 Vue 文件进行处理。

1. 安装 vue-loader：npm install vue-loader --save-dev。
2. 由于还需要对 Vue 文件中的 template 模板进行编译，因此还需要安装 vue-template-compiler：npm install vue-template-compiler --save-dev。
3. 在 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()
     ]
   }
   

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

ts-loader：

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

   // src/index.ts
   var title:string = 'Hello World'
   
   function getInfo (info: string) {
       console.log(info)
   }
   getInfo(title)
   

2. 修改 Webpack 打包的入口文件。

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

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

使用 ts-loader：

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

1. 安装 ts-loader：npm install ts-loader --save-dev。
2. 在 webpack.config.js 配置文件中进行配置。

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

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

eslint-loader：

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

   const title = "Hello World";
   

使用 eslint-loader：

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

1. 安装 ESLint：npm install eslint --save-dev。
2. 生成 ESLint 配置文件：npx eslint --init。
3. 安装 eslint-loader：npm install eslint-loader --save-dev。
4. 在 webpack.config.js 配置文件中进行配置。

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

5. 运行 npx webpack 命令进行打包，会发现 ESLint 对代码进行了校验。