webpack搭建vue3教程高级篇

作者：茳小国 | 来源：互联网 | 2023-09-16 11:31

webpack搭建vue3教程-高级篇一.配置ES6转ES5：解决浏览器不支持ES61.安装依赖：npminstall@babelcorebabel-loader@babelpre

webpack搭建vue3教程-高级篇

一.配置ES6转ES5：解决浏览器不支持ES6

1.安装依赖：

npm install @babel/core babel-loader @babel/preset-env -D

2.配置es6转es5的loader：

注意：配置也可以提出单独的文件配置：在项目根目录下创建babel.config.js或者babelrc.js具体配置查看官网教程

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    }

}

二.配置处理样式：

1.安装依赖：

npm install style-loader css-loader less less-loader -D

2.配置处理样式的loader:

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }

}

三.配置处理静态资源：

1.安装依赖：

npm install url-loader file-loader -D

2.配置静态资源的loader：

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|jpeg|gif|bmp)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            },
            {
                test: /\.(mp4|ogg|mp3|wav)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            }
        ]
    }

}

四.配置处理html：

1.安装依赖：

npm install html-webpack-plugin -D

2.配置html插件：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            title: 'webpack5搭建vue3'
        })
    ],
    module: {
        rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(jpg|png|jpeg|gif|bmp)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            },
            {
                test: /\.(mp4|ogg|mp3|wav)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        fallback: {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]'
                            }
                        }
                    }
                }
            }
        ]
    }

}

五.配置开发服务器：

1.安装依赖：

npm install webpack-dev-server -D

2.在webpack.config.js中配置：

devServer: {
        port: 3000,
        hot: true,
        open: true,
        contentBase: '../dist'
    },

六.清除打包文件：

1.安装依赖：

npm install clean-webpack-plugin -D

2.配置插件：

const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');


plugins: [
        new CleanWebPackPlugin()
    ],

七.设置环境变量：

1.命令方式：

2.配置方式：

3.创建.env文件：

4.cross-env：

npm install cross-env -D

八.分环境打包：

1.开发环境：

2.生产环境：

3.测试环境：

九.打包压缩：

1.压缩html：

new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            title: 'webpack5搭建vue3',
            minify: {
                collapseWhitespace: true, // 去掉空格
                removeComments: true // 去掉注释
            }
        }),

2.压缩css：

安装依赖：

npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin -D

配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');


new OptimizeCssAssetsWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })

3.压缩js：

注意：uglifyjs-webpack-plugin不支持压缩ES6语法的代码

安装依赖：

npm install terser-webpack-plugin -D

配置：

 const TerserWebpackPlugin = require('terser-webpack-plugin');

optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin()
        ]
    },

4.压缩图片：

安装依赖：

npm install image-webpack-loader -D

配置：

{
                loader: 'image-webpack-loader',
                options: {
                    mozjpeg: {
                        progressive: true,
                    },
                    optipng: {
                        enabled: false,
                    },
                    pngquant: {
                        quality: [0.65, 0.90],
                        speed: 4
                    },
                    gifsicle: {
                        interlaced: false,
                    },
                    webp: {
                        quality: 75
                    }
                }
            }

十.配置typescript:

1.安装依赖：

npm install typescript ts-loader -D

2.配置：

{
                test: /\.ts$/,
                use: [
                    'ts-loader'
                ]
            },

3.初始化：

tsc --init

注意：如果报错，请先全局安装typescript

npm install -g typescript

十一.配置vue：

1.安装依赖

npm install vue@next -S

npm install vue-loader@next @vue/compiler-sfc

2.配置loader:

 {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }

3.配置插件：

const { VueLoaderPlugin } = require('vue-loader/dist/index');

plugins: [
        new VueLoaderPlugin()
    ]

推荐阅读

string
手机移动端HTML5和JavaScript如何实现视频上传和压缩视频质量？

本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频，只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量，只有使用JAVA编写Android客户端才能实现压缩。此外，作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因，并提供了解决方法。最后，作者还介绍了一个用于处理图片的类，可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]

蜡笔小新 2023-12-12 15:58:44
string
Nginx使用AWStats日志分析的步骤及注意事项

本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息，并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境，并进行DNS解析。 ... [详细]

蜡笔小新 2023-12-14 19:42:01
replace
vue使用

关键词： ... [详细]

蜡笔小新 2023-12-14 19:14:56
php
SQL日志收缩及截断方法详解

本文详细介绍了SQL日志收缩的方法，包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时，还介绍了截断日志的原理和注意事项，包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法，可以有效减小逻辑日志的大小，提高数据库的性能。 ... [详细]

蜡笔小新 2023-12-14 18:23:25
require
Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法

本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数，可以设置密码的有效期、最小间隔时间、最小长度，并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ... [详细]

蜡笔小新 2023-12-14 17:57:01
install
rhel5.5搭建网关+LAMP+postfix+dhcp的步骤和配置方法

本文介绍了在rhel5.5操作系统下搭建网关+LAMP+postfix+dhcp的步骤和配置方法。通过配置dhcp自动分配ip、实现外网访问公司网站、内网收发邮件、内网上网以及SNAT转换等功能。详细介绍了安装dhcp和配置相关文件的步骤，并提供了相关的命令和配置示例。 ... [详细]

蜡笔小新 2023-12-14 17:13:20
install
在Windows 8上安装gvim中的插件的错误加载问题

本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置，但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置，并列出了出现的错误信息。 ... [详细]

蜡笔小新 2023-12-14 14:44:00
sum
图解redis的持久化存储机制RDB和AOF的原理和优缺点

本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件，恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘，实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点，帮助读者更好地理解redis的持久化存储策略。 ... [详细]

蜡笔小新 2023-12-13 20:24:11
install
Linux下Perl的安装及第一个程序运行

本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ... [详细]

蜡笔小新 2023-12-13 18:29:11
client
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
client
HTML学习02 图像标签的使用和属性

本文介绍了HTML中图像标签的使用和属性，包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项，帮助读者更好地理解和应用图像标签。 ... [详细]

蜡笔小新 2023-12-13 11:31:26
php
如何在Windows环境下配置php+apache环境

本文介绍了在Windows环境下如何配置php+apache环境，包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-13 10:39:24
php
在mac环境下使用nginx配置nodejs代理服务器的步骤

本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤，包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]

蜡笔小新 2023-12-13 10:34:21
string
C#制作Java+Mysql+Tomcat环境安装程序，一键式安装教程

本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序，实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包，解决了客户在安装软件时的复杂配置和繁琐问题，便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务，其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下，执行mysqld --install MySQL5命令。 ... [详细]

蜡笔小新 2023-12-12 19:29:55
install
CentOS安装Python2.7.2的步骤和注意事项

本文介绍了在CentOS上安装Python2.7.2的详细步骤，包括下载、解压、编译和安装等操作。同时提供了一些注意事项，以及测试安装是否成功的方法。 ... [详细]

蜡笔小新 2023-12-12 13:54:31

茳小国

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章