Home > Article > Web Front-end > 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!