webpack搭建vue 项目的步骤

下面我将介绍使用webpack搭建vue项目的步骤以及相关示例说明。

步骤一：初始化项目

首先，在本地创建一个空的文件夹，打开终端，进入该文件夹目录，执行以下命令：

npm init -y

这个命令将会初始化一个Node.js 项目（-y 表示跳过初始化界面）。

步骤二：安装依赖

在项目根目录下执行以下命令安装webpack和vue相关依赖：

npm i webpack webpack-cli webpack-dev-server vue vue-loader vue-template-compiler -D

其中，-D表示开发环境下依赖，安装完成后，可以看到package.json文件中的devDependencies中添加了以上依赖。

步骤三：创建 webpack 配置文件

在项目根目录下创建 webpack.config.js 文件，这个文件将包含所有的 webpack 配置和选项。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  mode: 'development', // 打包模式
  entry: path.resolve(__dirname, './src/main.js'), // 入口文件
  output: { 
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, './dist') // 打包后的目录
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin() // 配合 vue-loader 使用
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

配置文件包含以下内容：

• mode ：打包模式，分为development和production两种
• entry：入口文件路径
• output：打包后的输出路径及文件名
• module：配置打包时的loader
• plugins：配合 loader 使用的插件
• devServer：开发服务器配置

步骤四：创建应用入口文件

在 src 文件夹下新建 main.js，这将是应用的入口。

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

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

在这里，我们导入 Vue 并将它实例化，渲染 App 组件。

步骤五：创建 Vue 组件

在 src 文件夹下新建 App.vue，这将是应用的根组件。

<template>
  <div>
    <h1>欢迎来到我的webpack应用</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是我的webpack应用'
    };
  }
};
</script>

<style>
h1 {
  color: #f60;
}
p {
  font-size: 18px;
}
</style>

步骤六：打包 Vue 应用

在 package.json 中的 scripts 中添加以下代码：

"scripts": {
  "dev": "webpack-dev-server --open", // 启动本地服务
  "build": "webpack --mode production" // 打包
}

执行以下命令打包应用：

npm run build

至此，你已经成功地使用 webpack 打包 Vue 应用了。

附：示例说明

以下是根据上述步骤搭建的一个示例项目：webpack-vue-demo

另外，如果你不想通过手动搭建来实现快速构建 Vue 项目，可以尝试使用 Vue CLI 脚手架，它可以一键生成 Vue 项目，方便快捷。