VUE3 Getting Started Tutorial: Packaging and Building with Webpack

Vue is an excellent JavaScript framework that can help us quickly build interactive and efficient web applications. Vue 3 is the latest version of Vue, which introduces many new features and functionality. Webpack is currently one of the most popular JavaScript module packagers and build tools, which can help us manage various resources in our projects.

This article will introduce how to use Webpack to package and build Vue 3 applications.

1. Install Webpack

First, we need to install Webpack locally. You can use the npm package manager to install it, enter the following command:

npm install --save-dev webpack webpack-cli

Note: What is installed here is Webpack version 4 and above.

2. Create a Vue project

We need to create a Vue 3 project. You can use the official tool provided by Vue@vue/cli to create the project. Enter the following command to install:

npm install -g @vue/cli

After the installation is complete, enter the following command to create a Vue 3 project:

vue create my-project

where my-project is the project name, or you can use Need to define it yourself.

After the Vue 3 project is created, we need to use it with Webpack. In the root directory of the project, use the npm package manager to install Webpack and related loaders and plugins. Enter the following command:

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

Among them, webpack-dev-server is the development server of Webpack , local debugging is possible; html-webpack-plugin is used to add html files. vue-loader and vue-template-compiler are used to parse .vue files, css-loader, style-loader, sass-loader and sass, node-sass are used to process style files.

3. Configure Webpack

We need to create a webpack.config.js file in the project root directory to configure various parameters of Webpack. The specific content is as follows:

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'],
  },
};

In the above configuration, mode is the development mode, entry is the entry file, and output is the path to the output file. and name. rules in module indicates processing of various files. plugins represents the plug-ins we use.

4. Write Vue components

Create multiple .vue files in the src directory of the project. Here is a simple component as an example:

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

This is a simple Vue component named my-component. We can use this component in App.vue:

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

5. Run the project

In the root directory of the project, enter the following command to run the project:

npm run serve

Then , you can visit http://localhost:8080 in the browser to view the project effect.

6. Package the project

After the development is completed, we need to package the project and generate the release version of the code. In the project root directory, enter the following command:

npm run build

Webpack will package various parts of the project into the dist folder, and the generated files can be used to deploy web applications.

The above is the entire process of packaging and building Vue 3 applications using Webpack. I hope to be helpful.

The above is the detailed content of VUE3 Getting Started Tutorial: Packaging and Building with Webpack. For more information, please follow other related articles on the PHP Chinese website!