webpack搭建vue3教程-高级篇
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()
]