Web開發中的一個重要部分就是構建工具，其中諸如WebPack、Gulp和Grunt等工具，都幫助我們將代碼轉化為可以在現代瀏覽器中運行的代碼。Vue.js作為一個流行的前端框架，自然也對構建工具提供了支持。本文將會詳細介紹如何手動配置基于Webpack的Vue項目。

首先，我們需要一個基礎的Webpack配置。在項目根目錄創建一個名為webpack.config.js的文件，然后輸入以下內容：

const path = require('path');
module.exports = {
mode: 'development', // 環境模式
entry: './src/main.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 輸出目錄
filename: 'bundle.js', // 輸出文件名
},
};

上述代碼創建了一個Webpack基本配置文件，并設置了入口文件和輸出目錄。接下來，我們需要添加一些Vue相關的配置。首先，我們需要安裝Vue和Vue-Loader：

npm install vue vue-loader vue-template-compiler --save-dev

安裝完成后，我們需要在Webpack配置文件中加入如下代碼：

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new VueLoaderPlugin(),
],
};

上述代碼中，我們引用了Vue-Loader和Vue-Loader提供的插件。同時，我們還添加了一些加載器，例如babel-loader和style-loader等。這些加載器可以幫助我們加載不同種類的文件。

此外，我們還需要一個.babelrc文件來設置轉換選項。在項目根目錄創建一個名為.babelrc的文件，輸入以下內容：

{
"presets": [
"@babel/preset-env"
]
}

最后，我們需要更新一下我們的入口文件main.js。我們需要將Vue實例掛載到頁面上。修改main.js如下：

import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h =>h(App),
}).$mount('#app');

通過上述幾步操作，我們已經成功地手動配置了一個基于Webpack的Vue項目。在項目根目錄運行npm run dev命令即可運行項目。