在webpack4.0中使用vue的配置过程
文章目录
- 1.打包vue代码
- 2. 打包.vue结尾文件
前端开发者使用vuejs开发项目时，是无法直接通过webpack打包的，下面我们来学习一下如何在webpack环境中集成vuejs。
1.打包vue代码
1.做项目前，先使用npm init 生成package.json文件：
npm init
然后一直按“回车键”，默认配置生成package.json文件。
2.我们是在webpack中配置vue，则需先在项目目录下安装好webpack：
npm install webpack webpack-cli --save-dev
3.我们希望在项目中使用vuejs,那么必然需要对其有依赖，所以需要进行安装vue。
在项目目录下运行下面命令：
npm install vue --save
这是vue会下载在node_modules文件中。
4.这时可以在webpack中使用es6语法导入在用到vue语法的文件导入vue:
import Vue from "vue";
5.下面写个简单实例看是否能打包成功：
实例目录：
index.html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack中配置vuetitle>
head>
<body>
<div id="app">
<h1>{{message}}h1>
div>
<script src="./dist/bundle.js">script>
body>
html>
main.js:
import Vue from "vue";
const app = new Vue({
el: "#app",
data: {
message: "哈哈哈，webpack中配置vue",
},
});
webpack.config.js:
const path = require("path");
module.exports = {
mode: "development",
entry: "./main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
执行打包命令：
npx webpack
能成功打包，在浏览器是否能成功显示信息：
很显然报错了，这是因为我们还没有在webpack配置文件中更改一个配置：
const path = require("path");
module.exports = {
mode: "development",
entry: "./main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
};
我们在配置文件中多添加了resolve属性。
再次查看是否能正常显示：
ok,正常显示，这样就可以正常使用vue了，但是当要打包以.vue结尾的文件时还需进一步配置。
2. 打包.vue结尾文件
执行下面命令：
npm install [email protected] vue-template-compiler --save-dev
npm install css-loader style-loader --save-dev
添加一个App.vue结尾的文件：
<template>
<div>
<h2>{{ message }}h2>
div>
template>
<script>
export default {
name: "App",
data: function () {
return {
message: "哈哈哈，webpack中配置vue",
};
},
};
script>
<style scoped>
h2 {
color: blueviolet;
}
style>
修改main.js文件：(在这里引入App.vue文件，建立依赖关系，一起打包)
import Vue from "vue";
import App from "./src/vue/App.vue";
new Vue({
el: "#app",
template: "修改配置文件代码：
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
mode: "development",
entry: "./main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new VueLoaderPlugin()//必须添加
],
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
};
上面命令声明了 vue-loader需是15.7.0以上的版本，否则找不到VueLoaderPlugin。这里也要配置css-loader、style-loader是因为.vue结尾文件中也有html、css格式内容
执行打包命令：
查看是否运行成功：
