webpack5 学习系列 —— 支持 Vue

接之前的 webpack 学习系列

安装 Vue：

npm i vue -S

安装完成：

安装相关插件：

vue-loader：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

vue-template-compiler：把 vue-loader 提取出的 HTML 模版编译成对应的可执行的 JavaScript 代码。

npm i vue-loader vue-template-compiler -D

安装完成：

注意： vue-template-compiler 需和 vue 版本需一致。否则会报如下的错误：

移除之前的安装：

重新安装指定的版本：

npm install -g vue@2.6.14

安装完成：

运行 npm run build构建，报错：

> webpack-demo@1.0.0 build D:\demo\webpack-demo
> webpack

[webpack-cli] Failed to load 'D:\demo\webpack-demo\webpack.config.js' config
[webpack-cli] { Error: Cannot find module 'vue/compiler-sfc'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\demo\webpack-demo\node_modules\vue-loader\dist\index.js:8:24)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-demo@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-demo@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mayn\AppData\Roaming\npm-cache\_logs\2022-03-02T07_48_57_992Z-debug.log

安装compiler-sfc：

npm i -g @vue/compiler-sfc

安装完成：

注：此插件主要用于将 Vue 模板编译为渲染函数，避免运行时编译开销和 CSP 限制。

CSP（Content Security Policy）：网页安全政策，帮助检测和缓解某些类型的攻击，包括跨站脚本（XSS）和 数据注入等攻击。

新建 main.js ：

import Vue from "vue";
import App from "./App.vue";

export default new Vue({
  render: (h) => h(App),
}).$mount("#app");

新建 App.vue 文件：

<template>
  <div id="app">{{ message }}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue,this is a webpack demo",
    };
  },
};
</script>

修改 webpack.config.js文件：

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/main.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html", // 指定打包文件名称
      inject: true, // 向 html 模板注入所有静态资源
    }),
  ],
};

执行 npm run build 构建项目：

打开 dist 文件夹下的 index.html：

正常显示 Hello Vue。