接之前的 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 [email protected]
安装完成:
运行 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
。