webpack-從零搭建vue開發環境
阿新 • • 發佈：2019-02-11
先說再前面, 本篇博文是沒有用vue-cli搭建的, 只是一個學習webpack的demo, 當然也不能用於實際開發中, 如果讀者想看vue-cli搭建實際開發專案, 可以去vue-cli3
我們的目的是搭建一個帶有熱更新的vue開環環境專案
- 建立package.json
npm init -y
-
建立專案目錄
-
編寫程式碼
- app.vue
<template> <div>Hello vue</div> </template>- 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>Document</title> </head> <body> <div id="root"></div></body> </html>- main.js
import Vue from 'vue' import App from './app.vue' new Vue({ el: "#root", render: h => h(App) }) -
安裝依賴package.json
{
"name": "webpack-vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.config.dev.js --progress --open --hot" - 配置webpack.config.dev.js
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入vue-loader外掛
const HtmlWebpackPlugin = require('html-webpack-plugin') // 建立html檔案的外掛
module.exports = {
mode: "development", // 指定環境
entry: "./src/main.js", // 入口檔案
module: {
rules: [ // 處理所用的loader, webpack4和之前的版本有所不同
{
test: /\.vue$/,
loader: ["vue-loader"]
}
]
},
plugins: [ // 使用的外掛
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html' // 使用的html模板檔案的路徑
})
]
}
完成以上程式碼就完成了一個最基本的帶有熱更新功能的vue開發環境