能否不使用vue-cli，借助webpack构建Vue应用？

当然可以！你说得一点没错——vue-cli本身就是基于Webpack封装的工具，它帮我们把Webpack的复杂配置都提前预设好了，省了不少手动折腾的功夫，但完全可以跳过vue-cli，直接用Webpack从零搭建Vue应用。

手动用Webpack搭建Vue应用的步骤 #

1. 初始化项目 #

先创建一个空项目文件夹，然后初始化npm项目：

mkdir vue-webpack-demo && cd vue-webpack-demo
npm init -y

2. 安装必要依赖 #

需要安装Vue核心库，以及Webpack相关工具、处理Vue单文件组件的loader：

# 安装Vue核心
npm install vue
# 安装Webpack相关开发依赖
npm install webpack webpack-cli webpack-dev-server --save-dev
# 安装处理.vue组件和样式的loader
npm install vue-loader vue-template-compiler css-loader --save-dev

这里简单解释下关键依赖的作用：

• vue-loader：专门用来解析.vue单文件组件
• vue-template-compiler：配合vue-loader编译组件里的模板部分
• css-loader：处理组件内的样式代码

3. 配置Webpack #

在项目根目录创建webpack.config.js文件，写入基础配置：

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')

module.exports = {
  // 项目入口文件
  entry: './src/main.js',
  // 打包输出配置
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 模块解析规则
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  },
  // 必要插件，vue-loader需要它来正常工作
  plugins: [
    new VueLoaderPlugin()
  ],
  // 开发服务器配置
  devServer: {
    static: {
      directory: path.join(__dirname, './')
    },
    hot: true // 热更新
  }
}

4. 编写项目核心文件 #

• 创建src文件夹，里面新建入口文件main.js：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

• 再创建根组件src/App.vue：

<template>
  <div class="hello">
    <h1>Hello Vue with Webpack!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 50px;
}
</style>

• 在项目根目录创建index.html作为页面入口：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue + Webpack Demo</title>
</head>
<body>
  <div id="app"></div>
  <!-- 引入打包后的js文件 -->
  <script src="./dist/bundle.js"></script>
</body>
</html>

5. 添加npm脚本命令 #

打开package.json，在scripts字段里添加打包和开发命令：

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack serve --mode development"
}

现在你就可以运行npm run dev启动开发服务器，在浏览器里打开http://localhost:8080看到效果；运行npm run build就能生成生产环境的打包文件。

为什么选择跳过vue-cli？ #

• 高度自定义需求：如果你的项目需要对Webpack进行深度定制（比如特殊的打包规则、自定义插件等），vue-cli的预设配置可能不够灵活，手动配置能完全掌控每一个细节
• 学习目的：想要深入理解Vue和Webpack的协作原理，手动搭建的过程能帮你搞清楚各个依赖的作用和配置逻辑

当然，vue-cli的优势也很明显：它提供了快速搭建项目的脚手架，还有各种预设（比如Vue 3、TypeScript、ESLint等），不用自己一个个配置依赖和插件，适合快速启动常规项目。

内容的提问来源于stack exchange，提问作者Keanu Hie