webpack使用详细步骤
项目形貌本项目 webpack 的根本使用。
webpack 官方：https://webpack.docschina.org/concepts/
Element-plus 官方：https://element-plus.sxtxhy.com/zh-CN/
Vue3 官方：https://cn.vuejs.org/
项目组成明细
每个步骤完成后重新实行 npm run dev 即可看到结果
1、webpack
打包工具
安装
npm install webpack --save-dev
package.json
设置 dev 下令
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack --config webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.98.0"
}
}
入口文件 main.js
创建 src 文件夹，创建文件 main.js
const h1 = document.createElement('h1')
h1.innerHTML = '666'
document.body.appendChild(h1)
console.log(h1)
console.log(process.env.NODE_ENV === 'development')
设置文件 webpack.dev.js
const path = require('path')
module.exports = {
mode: 'development', // 开发模式
// 入口文件
entry: {
dev_index: './src/main.js' // 这个对象的键名会传递到下面的'.bundle.js'中的 name
},
// 输出文件
output: {
filename: '.bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出文件目录
},
devtool: 'inline-source-map' // 开启source-map
}
2、html-webpack-plugin
天生 html 文件
安装
npm install html-webpack-plugin --save-dev
package.json
{
// ...
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3"
}
}
创建文件 index.html
src 下面创建文件 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack.dev.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: 'template5-dev', // 生成的HTML文件标题
filename: 'index.html' // 生成的HTML文件名
template: './src/index.html', // 不配置此项，默认生成index.html；配置此项传递自定义HTML文件
// favicon: path.join(__dirname, './src/img/favicon.ico')
})
]
}
3、webpack-dev-server
启动一个当地服务器，并实时更新页面
安装
npm install webpack-dev-server --save-dev
package.json
dev 下令增长 serve
{
// ...
"scripts": {
"dev": "npx webpack serve --config webpack.dev.js"
},
// ...
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3",
"webpack-dev-server": "^5.2.0"
}
}
webpack.dev.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
devServer: {
static: './dist', // 静态资源目录
hot: true, // 开启模块热更新
port: 8080, // 端口号
open: true, // 自动打开浏览器
watchFiles: ['./src/index.html'], // 监听文件变化（自动刷新页面）
client: {
logging: 'none' // 关闭客户端日志
// logging: 'error', // 仅显示错误
}
}
}
4、style-loader、css-loader
处置惩罚 css 文件
安装
npm install style-loader css-loader --save-dev
package.json
{
// ...
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3",
"webpack-dev-server": "^5.2.0",
"style-loader": "^4.0.0",
"css-loader": "^7.1.2"
}
}
main.js
src 下面创建 css 文件夹，里面创建 index.css
// ...
import './css/index.css'
webpack.dev.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/i, // 匹配css文件
use: ['style-loader', 'css-loader'] // 使用loader
}
]
}
}
5、url-loader
处置惩罚图片、字体等静态资源
安装
npm install url-loader --save-dev
package.json
{
// ...
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3",
"webpack-dev-server": "^5.2.0",
"style-loader": "^4.0.0",
"css-loader": "^7.1.2",
"url-loader": "^4.1.1"
}
}
main.js
src 下面创建 img 文件夹， 添加 favicon.ico 文件
// ...
import img from './img/favicon.ico'
console.log(img)
document.body.appendChild(img)
webpack.dev.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '.', outputPath: 'images' } }], // 使用loader
type: 'javascript/auto' // 解决图片打包后路径问题
}
]
}
}
6、terser-webpack-plugin
压缩代码，去掉解释与 console.log 等 [生产环境时设置]
安装
npm install terser-webpack-plugin --save-dev
package.json
增长 build 下令
{
// ...
"scripts": {
"dev": "npx webpack serve --config webpack.dev.js",
"build": "npx webpack --config webpack.prod.js"
},
// ...
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3",
"webpack-dev-server": "^5.2.0",
"style-loader": "^4.0.0",
"css-loader": "^7.1.2",
"url-loader": "^4.1.1",
"terser-webpack-plugin": "^5.3.14"
}
}
创建文件 webpack.prod.js
生产环境设置文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
mode: 'production',
entry: {
index: './src/main.js'
},
output: {
publicPath: './',
filename: '.js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'template5',
filename: 'index.html',
template: './src/index.html',
favicon: path.join(__dirname, './src/img/favicon.ico')
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '.', outputPath: 'images' } }],
type: 'javascript/auto'
}
]
},
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true // 移除所有 console.*
},
format: {
comments: false // 移除所有注释
}
},
extractComments: false // 禁止生成独立的注释文件
})
]
}
}
7、vue-loader
处置惩罚 vue 文件
安装
npm install vue
-loader --save-dev
安装 vue3
npm install vue
package.json
{
// ...
"dependencies": {
"vue": "^3.5.13"
},
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3",
"webpack-dev-server": "^5.2.0",
"style-loader": "^4.0.0",
"css-loader": "^7.1.2",
"url-loader": "^4.1.1",
"terser-webpack-plugin": "^5.3.14",
"vue-loader": "^17.4.2"
}
}
创建文件 App.vue
src 下面创建 App.vue
<template>
<header>
<h1>{{ test_name }}</h1>
</header>
<main></main>
<footer></footer>
</template>
<script setup>
import { ref } from 'vue'
const test_name = ref('app.vue')
</script>
main.js
// ...
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
webpack.dev.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
// ...
plugins: [
// ...
new VueLoaderPlugin() // 添加VueLoaderPlugin
],
// ...
module: {
rules: [
// ...
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
7.1 不使用 vue-loader 加载 vue
不使用 vue-loader 插件，也可以使用 vue 的方法
此法打包后项目大些，编译速率慢些，正常不保举
main.js
// ...
import { createApp } from 'vue'
createApp({
data() {
return {
msg: 'Hello Vue!'
}
}
}).mount('#app')
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">{{ msg }}</div>
</body>
</html>
webpack.dev.js
打包生产时也要加上此设置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
resolve: {
alias: {
vue$: 'vue/dist/vue.esm-bundler.js' // 包含编译器的构建版本
}
}
}
8、全局加载 Element plus
全局加载打包后项目偏大，但设置简朴
安装
npm install element-plus
package.json
{
// ...
"dependencies": {
"vue": "^3.5.13",
"element-plus": "^2.9.6"
}
// ...
}
main.js
// ...
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App)
app.use(ElementPlus, {
locale: zhCn
})
app.mount('#app')
8.1、按需加载 Element plus
按需加载打包后项目偏小，但设置复杂，而且必要安装插件
安装插件
安装旧版，因最新版默认导出 ESM 格式，不支持 CommonJS 格式
npm install unplugin-auto-import@0.16.1 unplugin-vue-components@0.25.1 --save-dev
main.js
无需设置，如之前已设置全局 Element plus，需去掉
// ...
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
App.vue
使用方法，并设置国际化
<template>
<el-config-provider :locale="zhCn">
<el-button type="primary" @click="testOpen('test')">test</el-button>
</el-config-provider>
</template>
<script setup>
import { ref } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const testOpen = (name) => {
ElMessage('this is a message.')
}
</script>
webpack.dev.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
// ...
AutoImport({
resolvers:
}),
Components({
resolvers:
})
]
// ...
}
9、axios
哀求 axios
安装
npm install axios
package.json
{
// ...
"dependencies": {
"vue": "^3.5.13",
"element-plus": "^2.9.6",
"axios": "^1.8.4"
}
// ...
}
创建 api.js
在 src 目录下创建 api.js
import axios from 'axios'
const api = axios.create({
baseURL: 'http://localhost:9000',
timeout: 60000,
headers: { ['Content-Type']: 'application/x-www-form-urlencoded' }
// withCredentials: true // 跨域请求时是否需要使用凭证（携带cookie）
})
// 请求拦截器
api.interceptors.request.use(
(req) => {
return req
},
(err) => {
return Promise.reject(err)
}
)
// 响应拦截器
api.interceptors.response.use(
(res) => {
return res.data
},
(err) => {
return Promise.reject(err)
}
)
const { get, post, put, delete: del } = api
export const testGet = (params) => {
return get('/tianqiApi', { params })
}
App.vue
<template>
<!-- // ... -->
</template>
<script setup>
// ...
import { testGet } from './api'
const testApi = async () => {
try {
const res = await testGet()
console.log(res)
} catch (error) {
console.log(error)
}
}
testApi()
</script>
完备设置 webpack.dev.js
开辟设置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
mode: 'development', // 开发模式
// 入口文件
entry: {
dev_index: './src/main.js' // 这个对象的键名会传递到下面的'.bundle.js'中的 name
},
// 输出文件
output: {
filename: '.bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出文件目录
},
devtool: 'inline-source-map', // 开启source-map
devServer: {
static: './dist', // 静态资源目录
hot: true, // 开启模块热更新
port: 8080, // 端口号
open: true, // 自动打开浏览器
watchFiles: ['./src/index.html'], // 监听文件变化（自动刷新页面）
client: {
logging: 'none' // 关闭客户端日志
// logging: 'error', // 仅显示错误
}
},
plugins: [
new HtmlWebpackPlugin({
title: 'template5-dev', // 生成的HTML文件标题
filename: 'index.html', // 生成的HTML文件名
template: './src/index.html', // 不配置此项，默认生成index.html；配置此项传递自定义HTML文件
favicon: path.join(__dirname, './src/img/favicon.ico')
}),
new VueLoaderPlugin(), // 添加VueLoaderPlugin
AutoImport({
resolvers:
}),
Components({
resolvers:
})
],
module: {
rules: [
{
test: /\.css$/i, // 匹配css文件
use: ['style-loader', 'css-loader'] // 使用loader
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '.', outputPath: 'images' } }], // 使用loader
type: 'javascript/auto' // 解决图片打包后路径问题
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
完备设置 webpack.prod.js
生产设置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
mode: 'production', // 生产模式
// 入口文件
entry: {
index: './src/main.js' // 这个对象的键名会传递到下面的'.bundle.js'中的 name
},
// 输出文件
output: {
publicPath: './', // 输出文件路径前缀
filename: '.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出文件目录
clean: true // 每次构建前清理dist目录
},
plugins: [
new HtmlWebpackPlugin({
title: 'template5', // 生成的HTML文件标题
filename: 'index.html', // 生成的HTML文件名
template: './src/index.html', // 不配置此项，默认生成index.html；配置此项传递自定义HTML文件
favicon: path.join(__dirname, './src/img/favicon.ico')
}),
new VueLoaderPlugin(), // 添加VueLoaderPlugin
AutoImport({
resolvers:
}),
Components({
resolvers:
})
],
module: {
rules: [
{
test: /\.css$/i, // 匹配css文件
use: ['style-loader', 'css-loader'] // 使用loader
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '.', outputPath: 'images' } }], // 使用loader
type: 'javascript/auto' // 解决图片打包后路径问题
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true // 移除所有 console.*
},
format: {
comments: false // 移除所有注释
}
},
extractComments: false // 禁止生成独立的注释文件
})
]
}
}
完备设置 package.json
{
"name": "template5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack serve --config webpack.dev.js",
"build": "npx webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.8.4",
"element-plus": "^2.9.6",
"vue": "^3.5.13"
},
"devDependencies": {
"webpack": "^5.98.0",
"html-webpack-plugin": "^5.6.3",
"webpack-dev-server": "^5.2.0",
"style-loader": "^4.0.0",
"css-loader": "^7.1.2",
"url-loader": "^4.1.1",
"vue-loader": "^17.4.2",
"terser-webpack-plugin": "^5.3.14",
"unplugin-auto-import": "^0.16.1",
"unplugin-vue-components": "^0.25.1"
}
}
完备目录布局
src
|- img
||- favicon.ico
|- css
||- index.css
|- api.js // api文件
|- main.js // 入口文件
|- index.html // html文件
|- App.vue // vue文件
package.json
webpack.dev.js
webpack.prod.js
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]