起步

• 创建项目目录

mkdir webpack-vue3-demo

• 初始化 package.json

npm init -y

参考文档

• 安装 webpack webpack-cli webpack-dev-server webpack-merge

npm install webpack webpack-cli webpack-dev-server webpack-merge --save-dev

• 创建配置文件

mkdir build
cd build
touch webpack.base.js
touch webpack.dev.js
touch webpack.prod.js

如果执行第三个命名报如下错误 需要全局安装下touch-cli

npm install touch-cli -g

• 创建入口文件

mkdir src
touch main.js

• 创建脚本

#package.json
{"scripts": {"start": "webpack-dev-server --config build/webpack.dev.js","build": "webpack --config build/webpack.prod.js"}
}

• 安装 @babel系列

npm install @babel/core @babel/preset-env babel-loader --save-dev

配置babel-loader

// webpack.base.js
module: {rules: [{test: /\.js$/,loader: "babel-loader",exclude: /node_modules/}]}

创建babel配置文件 设置预设

配置文件参考文档
预设配置项参考文档

// babel.config.js
module.exports = {presets: [["@babel/preset-env",{useBuiltIns: "usage",corejs: "3.26"}]]
}

需要安装corejs依赖

npm install core-js --save

core-js参考文档

useBuiltIn属性默认false
entry替换core-js的导入 只导入目标环境模块所需的内容
usage添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性

• 安装vue

npm install vue -S
npm install vue-loader -D

不需要安装vue-template-compiler

配置vue-loader

module: {rules: [{test: /\.vue$/,loader: "vue-loader"}]},plugins: [new VueLoaderPlugin()]

// main.js
import {createApp} from "vue";
import App from './App'const app = createApp(App)app.mount('#app')

• 安装 html-webpack-plugin

npm i html-webpack-plugin -D

配置

plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: path.resolve(__dirname, '../index.html'),filename: "index.html",title: 'title'})]

根目录创建入口html模板

用来生成 index.html 可指定一个模板 打包后的js文件会自动引入

• 本地启动

npm run start

• 处理CSS

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

配置loader

module: {rules: [{test: /\.css$/,use: ['vue-style-loader','css-loader']},{test: /\.less$/,use: ['vue-style-loader','css-loader','less-loader']}]}

• 处理静态资源

module: {rules: [{test: /\.(jpe?g|png|gif|svg)/,type: "asset",generator: {filename: 'img/[name].[hash:8][ext][query]'},parser: {dataUrlCondition: {maxSize: 4 * 1024}}}]}

• postcss系列

npm install postcss-loader autoprefixer -D

修改处理css相关配置

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

postcss配置文件

// postcss.config.js
module.exports = {plugins: [require('autoprefixer')]
}

autoprefixer参考文档

• browserslist配置

参考文档

• 抽取css

mini-css-extract-plugin 代替 extract-text-webpack-plugin

npm install mini-css-extract-plugin -D

配置

// webpack.prod.js
module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader',]},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader']},]}
plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[chunkhash:8].css'})]

• 重复打包自动删除旧的打包文件

output: {clean: true
}

webpack5内置 不需要再安装 clean-webpack-plugin

• 压缩css js

npm install css-minimizer-webpack-plugin terser-webpack-plugin -D

配置

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

terser参考文档
css-minimizer参考文档