VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드

Vue는 대화형의 효율적인 웹 애플리케이션을 빠르게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. 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에서 제공하는 공식 도구를 사용하여 프로젝트를 만들 수 있습니다. 설치하려면 다음 명령을 입력하십시오. @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 -D
npm 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.运行项目

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

npm run serve

然后，可以在浏览器中访问http://localhost:8080，查看项目效果。

6.打包项目

在开发完成后，我们需要将项目打包，生成发布版本的代码。在项目根目录下，输入以下命令：

npm run build

Webpack会将项目的各个部分打包到distrrreee

설치가 완료된 후 다음 명령을 입력하여 Vue 3 프로젝트를 생성하십시오.

rrreee

여기서 my-project는 프로젝트 이름이며 다음과 같을 수도 있습니다. 필요하다고 정의됩니다. 🎜🎜Vue 3 프로젝트가 생성된 후에는 Webpack과 함께 사용해야 합니다. 프로젝트의 루트 디렉터리에서 npm 패키지 관리자를 사용하여 Webpack 및 관련 로더와 플러그인을 설치합니다. 🎜rrreee🎜 그 중 webpack-dev-server는 개발 서버입니다. 로컬 디버깅이 가능한 Webpack; html-webpack-plugin은 html 파일을 추가하는 데 사용됩니다. vue-loader 및 vue-template-compiler는 .vue 파일, css-loader, style-loader를 구문 분석하는 데 사용됩니다. code >, <code>sass-loader 및 sass, node-sass는 스타일 파일을 처리하는 데 사용됩니다. 🎜🎜3. Webpack 구성🎜🎜Webpack의 다양한 매개변수를 구성하려면 프로젝트 루트 디렉토리에 webpack.config.js 파일을 생성해야 합니다. 구체적인 내용은 다음과 같습니다. 🎜rrreee🎜위 구성에서 mode는 개발 모드, entry는 항목 파일, output 경로 및 출력 파일 이름입니다. 모듈의 규칙은 다양한 파일을 처리하는 것을 의미합니다. 플러그인은 우리가 사용하는 플러그인을 나타냅니다. 🎜🎜4. Vue 구성 요소 작성 🎜🎜프로젝트의 src 디렉터리에 여러 개의 .vue 파일을 만듭니다. 다음은 간단한 구성 요소의 예입니다. 🎜rrreee🎜이것은 my-comComponent라는 간단한 Vue 구성 요소입니다. App.vue에서 이 구성 요소를 사용할 수 있습니다: 🎜rrreee🎜 5. 프로젝트 실행 🎜🎜 프로젝트의 루트 디렉터리에서 다음 명령을 입력하여 프로젝트를 실행합니다. 🎜rrreee🎜 그런 다음 http에 액세스할 수 있습니다. 브라우저: //localhost:8080, 프로젝트 효과를 확인하세요. 🎜🎜6. 프로젝트 패키징🎜🎜개발이 완료되면 프로젝트를 패키징하고 릴리스 버전의 코드를 생성해야 합니다. 프로젝트 루트 디렉터리에 다음 명령을 입력합니다. 🎜rrreee🎜Webpack은 프로젝트의 다양한 부분을 dist 폴더에 패키징하고 생성된 파일을 사용하여 웹 애플리케이션을 배포할 수 있습니다. 🎜🎜위는 Webpack을 사용하여 Vue 3 애플리케이션을 패키징하고 빌드하는 전체 과정입니다. 도움이 되었으면 좋겠습니다. 🎜

위 내용은 VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!