语言►nodejs►库►webpack

webpack中的vue-loader

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/19/webpack%E4%B8%AD%E7%9A%84vue-loader/

摘要

本文主要讲述了：

  1. 作用
  2. 安装
  3. 示例

正文

作用

在webpack中使用vue的单文件组件（.vue）。

vue-loader提供以下功能：

  • 允许把组件的每个部分分发给webpack中的其他 loader 处理（例如：把<style lang="scss">交给sass-loader）
  • 把<template>内的静态资源（例如：图片、字体等文件）视作模块并分发给webpack中的其他 loader 处理
  • 为组件模拟有作用域的 CSS
  • 组件热重载功能

安装

注意：vue-template-compiler是vue-loader的同伴依赖，需要一并安装。

vue-template-compiler用于将<template>预编译成渲染函数以避免运行时编译的开销。

每当一个新版本的vue发布时，一个与之相匹配的vue-template-compiler就会随之发布（两者的版本号相同）。因此当开发者更新了vue的版本之后必须同步更新vue-template-compiler的版本。

1
2
3
4
#!/usr/bin/env bash

npm install --save-dev vue-loader vue-template-compiler
npm install vue

示例

注意：VueLoaderPlugin是必须的，它用于把webpack配置中的rules字段复制并应用到组件内相应的代码块。

learn_webpack/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/main.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: (file) => /node_modules/.test(file) && !/\.vue\.js/.test(file),
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
      },
      {
        test: /\.styl$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'stylus-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 80,
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'learn_webpack',
      template: 'public/index.html',
    }),
    new VueLoaderPlugin(),
  ],
};

learn_webpack/babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: 9,
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
  ],
  plugins: [],
};

learn_webpack/public/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

learn_webpack/src/main.js

1
2
3
4
5
6
7
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: (h) => h(App),
});

learn_webpack/src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <h1>hello, world</h1>
  </div>
</template>
<script>
export default {
  name: 'App',
};
</script>
<style>
body {
  margin: 0;
}
</style>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/19/webpack%E4%B8%AD%E7%9A%84vue-loader/

本文对你有帮助？请支持我

支付宝
微信