VUE3入门教程：使用Webpack进行打包和构建-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

VUE3入门教程：使用Webpack进行打包和构建

Vue是一款优秀的JavaScript框架，它可以帮助我们快速构建交互性强、高效性好的Web应用程序。Vue 3是Vue的最新版本，它引入了很多新的特性和功能。Webpack是目前最流行的JavaScript模块打包器和构建工具之一，它可以帮助我们管理项目中的各种资源。

本文就为大家介绍如何使用Webpack打包和构建Vue 3应用程序。

1.安装Webpack

首先，我们需要在本地安装Webpack。可以使用npm包管理器进行安装，输入以下命令：

npm install --save-dev webpack webpack-cli

登录后复制

注意：这里安装的是Webpack 4版本及以上。

2.创建Vue项目

我们需要创建一个Vue 3项目，可以使用Vue官方提供的工具@vue/cli来创建项目。输入以下命令来安装：

npm install -g @vue/cli

登录后复制

安装完成后，输入以下命令来创建Vue 3项目：

vue create my-project

登录后复制

其中my-project为项目名称，也可以根据需要自行定义。

Vue 3项目创建完成后，我们需要将其与Webpack结合使用。在项目的根目录下，使用npm包管理器安装Webpack和相关的loader和plugin，输入以下命令：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -Dnpm install --save-dev vue-loader vue-template-compiler css-loader style-loader sass-loader sass node-sass

登录后复制

其中，webpack-dev-server是Webpack的开发服务器，可以进行本地调试；html-webpack-plugin用于添加html文件。vue-loader和vue-template-compiler用于解析.vue文件，css-loader、style-loader、sass-loader和sass、node-sass用于处理样式文件。

3.配置Webpack

我们需要在项目根目录下创建一个webpack.config.js文件，来配置Webpack的各项参数。具体内容如下：

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  mode: 'development',  devServer: {    port: 8080,    historyApiFallback: true,    noInfo: true,    overlay: true,  },  entry: path.resolve(__dirname, './src/main.js'),  output: {    path: path.resolve(__dirname, './dist'),    publicPath: '/',    filename: 'build.js',  },  module: {    rules: [      {        test: /.vue$/,        loader: 'vue-loader',        exclude: /node_modules/,      },      {        test: /.js$/,        loader: 'babel-loader',        exclude: /node_modules/,      },      {        test: /.css$/,        use: ['style-loader', 'css-loader'],      },      {        test: /.scss$/,        use: ['style-loader', 'css-loader', 'sass-loader'],      },    ],  },  plugins: [    new HtmlWebpackPlugin({      template: path.resolve(__dirname, './index.html'),      filename: 'index.html',    }),  ],  resolve: {    alias: {      vue$: 'vue/dist/vue.esm-bundler.js',    },    extensions: ['*', '.js', '.vue', '.json'],  },};

登录后复制

上述配置中，其中mode为开发模式，entry为入口文件，output为输出文件的路径和名称。module中的rules表示对各种文件进行处理。plugins表示我们使用的插件。

4.编写Vue组件

在项目的src目录中，创建多个.vue文件。这里以一个简单的组件为例：

<template>    <div>我是一个Vue组件</div></template><script>    export default {        name: 'my-component'    }</script>

登录后复制

这是一个简单的Vue组件，名为my-component。我们可以在App.vue中使用该组件：

<template>    <div>        <my-component />    </div></template><script>    import MyComponent from './MyComponent.vue';    export default {        components: {            MyComponent        }    }</script>

登录后复制

5.运行项目

在项目的根目录下，输入以下命令来运行项目：