webpack+vue
下面結合一個簡單的vue實例講解webpack和vue的結合使用：
1 package.json
{
"name": "webpack_vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack",
"server": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-transform-runtime": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"@babel/preset-env": "^7.8.4",
"@babel/runtime": "^7.8.4",
"babel-preset-mobx": "^2.0.0",
"vue": "^2.6.11"
}
}
2 安裝庫
npm i
3 web.config.js
const path = require("path");
module.exports = {
// 編譯模式
mode: "development",
entry: path.join(__dirname, "./src/main.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js" //輸出文件的名稱
},
resolve: {
alias: {
vue$: "vue/dist/vue.js" // 修改vue被導入時的路徑
}
},
devServer: {
open: true,
port: 3000,
contentBase: "src",
hot: true
},
module: {
rules: [
// 第三方模塊正則匹配規則
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
},
{
test: /\.(ttf|eot|svg|woff|woff2s)$/,
use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
},
{
test: /\.js$/,
use: "babel-loader",
// 不轉換node_modules下面的包
exclude: /node_modules/
}
]
}
};
4 .babelrc
{
"presets": ["@babel/preset-env", "mobx"],
"plugins": ["@babel/plugin-transform-runtime"]
}
5 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack+vue使用</title>
</head>
<body>
<div id="app">
<login></login>
</div>
<script src="./bundle.js"></script>
</body>
</html>
6 main.js
import Vue from "vue";
var login = {
template: "<h1>ss</h1>"
};
var vm = new Vue({
el: "#app",
data: {},
methods: {},
components: {
login
}
});
文件結構爲：
運行命令npm run server即可顯示網頁**“ss”**。
下面我們引入一個新的類型的文件：.vue，我們也需要一個新類型的loader。
1 本地安裝
npm i vue-loader vue-template-compiler -D
2 修改web.config.js，添加vue-loader
const VueLoaderPlugin = require("vue-loader/lib/plugin");// 這句不要忘記！
module: {
rules: [
// 第三方模塊正則匹配規則
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
},
{
test: /\.(ttf|eot|svg|woff|woff2s)$/,
use: "url-loader?limit=70000&name=[hash:8]-[name].[ext]"
},
{
test: /\.js$/,
use: "babel-loader",
// 不轉換node_modules下面的包
exclude: /node_modules/
},
{
test: /\.vue$/,
use: "vue-loader"
}
]
},
plugins:[
// 請確保引入這個插件！
new VueLoaderPlugin()
]
3 login.vue
<template>
<div>
<h1>登錄組件</h1>
</div>
</template>
4 main.js
import Vue from "vue";
import login from "./login.vue";
var vm = new Vue({
el: "#app",
data: {},
methods: {},
render: function(createEle) {
return createEle(login);
}
});
index.html文件並不需要改變，這樣就做到了組件與js分離。
對於完整版的vue.js庫，使用render或者components都可以顯示.vue中定義的template，但對於閹割版的vue-runtime庫，只能使用render。