webpack建立vue專案

title: webpack建立vue專案

tag: [webpack,vue,前端]

歡迎檢視我的部落格 永無島

node -v

10.4.0

npm -v

6.1.0

新建專案目錄

進入cmd,cmd目錄指定到專案目錄

mkdir myvuetest

cd myvuetest

npm init

"devdependencies": ,

"dependencies": 

package.json不可加注釋，如要直接引用需去掉注釋

|_myvuetest

|__dist //存放打包後的檔案
|__src //專案編寫目錄
|____main.js //入口檔案
|__template.html //vue的模板檔案（為空的html5）
|__package.json //npm安裝依賴檔案
|__webpack.congfig.js //webpack配置

hello, my vue

import vue from 'vue' //引入vue

vue.config.productiontip = false //阻止vue在啟動時生成的生產提示
new vue()

在webpack.config.js中配置

const htmlwebpackplugin = require('html-webpack-plugin');//這個外掛程式的作用是根據模板自動生成index檔案

const webpack = require('webpack')
const path = require('path');
const vueloaderplugin = require('vue-loader/lib/plugin') //vue-loader的使用
const friendlyerrorsplugin = require('friendly-errors-webpack-plugin')
module.exports = ,
resolve: 
},module: ,]},
plugins:[//需要用到的外掛程式
new htmlwebpackplugin(),
new vueloaderplugin(),
new webpack.hotmodulereplacementplugin(),//熱更新
new friendlyerrorsplugin(,
onerrors: (severity, errors) => )}})
],devtool: "cheap-module-eval-source-map",//主要用於更快的構建速度，詳情見
devserver:,
],},
hot: true,
contentbase: false, // since we use copywebpackplugin.
compress: true,
host: "localhost",
port: 8080,
open: false,
overlay: ,
publicpath: "/",
proxy: {},
quiet: true, // necessary for friendlyerrorsplugin
watchoptions: },}

webpack-dev-server --inline --progress

"scripts": ,

npm start

http://localhost:8080

檢視本專案原始碼請移步這裡

使用webpack建立vue專案

在使用webpack建立vue專案時，你需要先將下面開發環境搞定。進入想要建立專案的目錄，右鍵開啟cmd，輸入建立命令，my project為專案的名字，可以自行修改，但是不得包含大寫字母。vue init webpack my project 建立選項設定，下面為經過一步驟後會出現的建立選項。如果...

webpack專案建立步驟

1 在專案根目錄執行npm init y命令快速初始化專案 2 在專案根目錄建立 src 源 目錄和 dist 產品目錄 3 在src目錄下建立index.html檔案 4 使用npm安裝webpack,webpack cli,執行如下命令即可 npm i webpack webpack cli d...

webpack構建vue專案深入

css css reset.css resetcss js js home home router router main.js mainjs view view index.html indexhtml package.json packagejson 配置webpack.config.js co...