webpack 之 使用vue配置
注意点:vue在发布构建的时候有两类版本
1/runtime-only =>代码中不可以有任何的template
2/runtime-compiler => 代码中,可以有template,因为有compiler可以用于template的编译
一.如何配置
(1)添加以上文件
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">{{message}}</div> </body> </html>
main.js
import Vue from "vue"; const app = new Vue({ el: "#app", data: { message: "hello app", }, });
package.json
{ "name": "day07", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": { "vue": "^2.6.12" }, "devDependencies": { "@babel/core": "^7.12.17", "@babel/preset-env": "^7.12.17", "babel-loader": "^8.2.2", "css-loader": "^5.0.2", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.2.0", "less": "^4.1.1", "less-loader": "^8.0.0", "style-loader": "^2.0.0", "url-loader": "^4.1.1", "webpack": "^5.23.0", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" }, "scripts": { "build": "webpack --config webpack.config.js", "dev": " webpack serve --config webpack.config.js" }, "keywords": [], "author": "", "license": "ISC" }
webpack.config.js
let path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//入口
entry: path.join(__dirname, "./src/main.js"),
//出口
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js",
},
//环境
mode: "development",
//插件
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
}),
],
devServer: {
port: 3000, // 端口号
open: true, // 自动打开浏览器
},
module: {
rules: [
{
// 正则表达式,用于匹配所有的css文件
test: /\.css$/,
// 先用 css-loader 让webpack能够识别 css 文件的内容
// 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 900000,
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
resolve: { //这就就是的配置就是给定某种版本进行编译,如果没有这个,那么在运行时,index.html中的{{message}}是无法被编译的
alias: {
//别名
vue$: "vue/dist/vue.esm.js",
},
},
};
(2)依次执行一下命令
npm i vue //安装vue包 npm install发 //将pageage.json中的包都安装一下 npm run dev //因为是开发中,所以才用这个
二.以组件化去思考:终极配置方案
这个命令特别重要:因为vue-loader可以去打包.vue文件的内容, copmiler是可以将.vue的内容转为render函数,提升性能
执行命令:npm vue-loader vue-template-compiler --save-dev
分析:有一个SPA(single page application)的一个概念,单页面应用,就是只有index.html页面,而且这个页面时不做任何修改的.
(1)index.html文件内容(不在变动)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"></div> </body> </html>
(2)通过组件化来实现 main.js
import Vue from "vue"; import App from "./vue/app"; //默认导出所以才不需要大括号 // let App = { //其实是把这里的代码拿到了app.js文件中 // template: ` // <div> // <h2>{{message}}</h2> // </div> // `, // data() { // return { // message: "hello world", // }; // }, // }; new Vue({ el: "#app", template: "<App/>", components: { App, }, });
(3)创建app.js
export default { template: ` <div> <h2>{{message}}</h2> </div> `, data() { return { message: "hello world ,welcome to china", }; }, };
分析:但是这样写了以后,会发现template 和 数据没有进行分离,所以还需要创建App.vue
三.通过vue文件加载数据
(1)创建App.vue
<template> <div> <h2>{{ message }}</h2> </div> </template> <script> export default { name: "App", data() { return { message: "hello world ,welcome to china", }; }, }; </script> <style scoped></style>
(2)修改main.js文件
import Vue from "vue"; // import App from "./vue/app"; //因为不需要了 import App from "./vue/App.vue"; //通过vue来实现 // let App = { // template: ` // <div> // <h2>{{message}}</h2> // </div> // `, // data() { // return { // message: "hello world", // }; // }, // }; new Vue({ el: "#app", template: "<App/>", components: { App, }, });
(3)配置webpack.config.js
let path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin"); //编译vue,这里的配置非常重要
module.exports = {
//入口
entry: path.join(__dirname, "./src/main.js"),
//出口
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js",
},
//环境
mode: "development",
//插件
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
}),
new VueLoaderPlugin(),
],
devServer: {
port: 3000, // 端口号
open: true, // 自动打开浏览器
},
module: {
rules: [
{
// 正则表达式,用于匹配所有的css文件
test: /\.css$/,
// 先用 css-loader 让webpack能够识别 css 文件的内容
// 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 900000,
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.vue$/, //通过vue实现,这里也需要
use: ["vue-loader"],
},
],
},
resolve: {
alias: {
extensions:['.js','.css','.vue']
//别名
vue$: "vue/dist/vue.esm.js",
},
},
};
(4)运行命令
yarn dev