webpack使用详细步骤

灌篮少年  金牌会员 | 2025-3-24 06:26:25 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 935|帖子 935|积分 2805

项目形貌

   本项目 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

   打包工具
  安装

  1. npm install webpack --save-dev
复制代码
package.json

   设置 dev 下令
  1. {
  2.   "name": "test",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "npx webpack --config webpack.dev.js"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "webpack": "^5.98.0"
  14.   }
  15. }
复制代码
入口文件 main.js

   创建 src 文件夹，创建文件 main.js
  1. const h1 = document.createElement('h1')
  2. h1.innerHTML = '666'
  3. document.body.appendChild(h1)
  5. console.log(h1)
  6. console.log(process.env.NODE_ENV === 'development')
复制代码
设置文件 webpack.dev.js

  1. const path = require('path')
  3. module.exports = {
  4.   mode: 'development', // 开发模式
  6.   // 入口文件
  7.   entry: {
  8.     dev_index: './src/main.js' // 这个对象的键名会传递到下面的'[name].bundle.js'中的 name
  9.   },
  11.   // 输出文件
  12.   output: {
  13.     filename: '[name].bundle.js', // 输出文件名
  14.     path: path.resolve(__dirname, 'dist') // 输出文件目录
  15.   },
  16.   devtool: 'inline-source-map' // 开启source-map
  17. }
复制代码
2、html-webpack-plugin

   天生 html 文件
  安装

  1. npm install html-webpack-plugin --save-dev
复制代码
package.json

  1. {
  2.   // ...
  3.   "devDependencies": {
  4.     "webpack": "^5.98.0",
  5.     "html-webpack-plugin": "^5.6.3"
  6.   }
  7. }
复制代码
创建文件 index.html

   src 下面创建文件 index.html
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title><%= htmlWebpackPlugin.options.title %></title>
  6.   </head>
  7.   <body>
  8.     <div id="app"></div>
  9.   </body>
  10. </html>
复制代码
webpack.dev.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   // ...
  7.   plugins: [
  8.     new HtmlWebpackPlugin({
  9.       title: 'template5-dev', // 生成的HTML文件标题
  10.       filename: 'index.html' // 生成的HTML文件名
  11.       template: './src/index.html', // 不配置此项，默认生成index.html；配置此项传递自定义HTML文件
  12.       // favicon: path.join(__dirname, './src/img/favicon.ico')
  13.     })
  14.   ]
  15. }
复制代码
3、webpack-dev-server

   启动一个当地服务器，并实时更新页面
  安装

  1. npm install webpack-dev-server --save-dev
复制代码
package.json

   dev 下令增长 serve
  1. {
  2.   // ...
  3.   "scripts": {
  4.     "dev": "npx webpack serve --config webpack.dev.js"
  5.   },
  6.   // ...
  7.   "devDependencies": {
  8.     "webpack": "^5.98.0",
  9.     "html-webpack-plugin": "^5.6.3",
  10.     "webpack-dev-server": "^5.2.0"
  11.   }
  12. }
复制代码
webpack.dev.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   // ...
  7.   devServer: {
  8.     static: './dist', // 静态资源目录
  9.     hot: true, // 开启模块热更新
  10.     port: 8080, // 端口号
  11.     open: true, // 自动打开浏览器
  12.     watchFiles: ['./src/index.html'], // 监听文件变化（自动刷新页面）
  13.     client: {
  14.       logging: 'none' // 关闭客户端日志
  15.       // logging: 'error', // 仅显示错误
  16.     }
  17.   }
  18. }
复制代码
4、style-loader、css-loader

   处置惩罚 css 文件
  安装

  1. npm install style-loader css-loader --save-dev
复制代码
package.json

  1. {
  2.   // ...
  3.   "devDependencies": {
  4.     "webpack": "^5.98.0",
  5.     "html-webpack-plugin": "^5.6.3",
  6.     "webpack-dev-server": "^5.2.0",
  7.     "style-loader": "^4.0.0",
  8.     "css-loader": "^7.1.2"
  9.   }
  10. }
复制代码
main.js

   src 下面创建 css 文件夹，里面创建 index.css
  1. // ...
  2. import './css/index.css'
复制代码
webpack.dev.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   // ...
  7.   module: {
  8.     rules: [
  9.       {
  10.         test: /\.css$/i, // 匹配css文件
  11.         use: ['style-loader', 'css-loader'] // 使用loader
  12.       }
  13.     ]
  14.   }
  15. }
复制代码
5、url-loader

   处置惩罚图片、字体等静态资源
  安装

  1. npm install url-loader --save-dev
复制代码
package.json

  1. {
  2.   // ...
  3.   "devDependencies": {
  4.     "webpack": "^5.98.0",
  5.     "html-webpack-plugin": "^5.6.3",
  6.     "webpack-dev-server": "^5.2.0",
  7.     "style-loader": "^4.0.0",
  8.     "css-loader": "^7.1.2",
  9.     "url-loader": "^4.1.1"
  10.   }
  11. }
复制代码
main.js

   src 下面创建 img 文件夹， 添加 favicon.ico 文件
  1. // ...
  2. import img from './img/favicon.ico'
  4. console.log(img)
  5. document.body.appendChild(img)
复制代码
webpack.dev.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   // ...
  7.   module: {
  8.     rules: [
  9.       // ...
  10.       {
  11.         test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
  12.         use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '[name].[ext]', outputPath: 'images' } }], // 使用loader
  13.         type: 'javascript/auto' // 解决图片打包后路径问题
  14.       }
  15.     ]
  16.   }
  17. }
复制代码
6、terser-webpack-plugin

   压缩代码，去掉解释与 console.log 等 [生产环境时设置]
  安装

  1. npm install terser-webpack-plugin --save-dev
复制代码
package.json

   增长 build 下令
  1. {
  2.   // ...
  3.   "scripts": {
  4.     "dev": "npx webpack serve --config webpack.dev.js",
  5.     "build": "npx webpack --config webpack.prod.js"
  6.   },
  7.   // ...
  8.   "devDependencies": {
  9.     "webpack": "^5.98.0",
  10.     "html-webpack-plugin": "^5.6.3",
  11.     "webpack-dev-server": "^5.2.0",
  12.     "style-loader": "^4.0.0",
  13.     "css-loader": "^7.1.2",
  14.     "url-loader": "^4.1.1",
  15.     "terser-webpack-plugin": "^5.3.14"
  16.   }
  17. }
复制代码
创建文件 webpack.prod.js

   生产环境设置文件
  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const TerserPlugin = require('terser-webpack-plugin')
  5. module.exports = {
  6.   mode: 'production',
  7.   entry: {
  8.     index: './src/main.js'
  9.   },
  10.   output: {
  11.     publicPath: './',
  12.     filename: '[name].js',
  13.     path: path.resolve(__dirname, 'dist'),
  14.     clean: true
  15.   },
  16.   plugins: [
  17.     new HtmlWebpackPlugin({
  18.       title: 'template5',
  19.       filename: 'index.html',
  20.       template: './src/index.html',
  21.       favicon: path.join(__dirname, './src/img/favicon.ico')
  22.     })
  23.   ],
  24.   module: {
  25.     rules: [
  26.       {
  27.         test: /\.css$/i,
  28.         use: ['style-loader', 'css-loader']
  29.       },
  30.       {
  31.         test: /\.(png|svg|jpg|jpeg|gif)$/i,
  32.         use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '[name].[ext]', outputPath: 'images' } }],
  33.         type: 'javascript/auto'
  34.       }
  35.     ]
  36.   },
  38.   optimization: {
  39.     minimizer: [
  40.       new TerserPlugin({
  41.         terserOptions: {
  42.           compress: {
  43.             drop_console: true // 移除所有 console.*
  44.           },
  45.           format: {
  46.             comments: false // 移除所有注释
  47.           }
  48.         },
  49.         extractComments: false // 禁止生成独立的注释文件
  50.       })
  51.     ]
  52.   }
  53. }
复制代码
7、vue-loader

   处置惩罚 vue 文件
  安装

  1. npm install vue
  2. -loader --save-dev
复制代码
安装 vue3

  1. npm install vue
复制代码
package.json

  1. {
  2.   // ...
  3.   "dependencies": {
  4.     "vue": "^3.5.13"
  5.   },
  6.   "devDependencies": {
  7.     "webpack": "^5.98.0",
  8.     "html-webpack-plugin": "^5.6.3",
  9.     "webpack-dev-server": "^5.2.0",
  10.     "style-loader": "^4.0.0",
  11.     "css-loader": "^7.1.2",
  12.     "url-loader": "^4.1.1",
  13.     "terser-webpack-plugin": "^5.3.14",
  14.     "vue-loader": "^17.4.2"
  15.   }
  16. }
复制代码
创建文件 App.vue

   src 下面创建 App.vue
  1. <template>
  2.   <header>
  3.     <h1>{{ test_name }}</h1>
  4.   </header>
  5.   <main></main>
  6.   <footer></footer>
  7. </template>
  9. <script setup>
  10. import { ref } from 'vue'
  12. const test_name = ref('app.vue')
  13. </script>
复制代码
main.js

  1. // ...
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  5. const app = createApp(App)
  6. app.mount('#app')
复制代码
webpack.dev.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const { VueLoaderPlugin } = require('vue-loader')
  5. module.exports = {
  6.   // ...
  8.   plugins: [
  9.     // ...
  10.     new VueLoaderPlugin() // 添加VueLoaderPlugin
  11.   ],
  13.   // ...
  15.   module: {
  16.     rules: [
  17.       // ...
  18.       {
  19.         test: /\.vue$/,
  20.         loader: 'vue-loader'
  21.       }
  22.     ]
  23.   }
  24. }
复制代码
7.1 不使用 vue-loader 加载 vue

   不使用 vue-loader 插件，也可以使用 vue 的方法
此法打包后项目大些，编译速率慢些，正常不保举
  main.js

  1. // ...
  2. import { createApp } from 'vue'
  4. createApp({
  5.   data() {
  6.     return {
  7.       msg: 'Hello Vue!'
  8.     }
  9.   }
  10. }).mount('#app')
复制代码
index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title><%= htmlWebpackPlugin.options.title %></title>
  6.   </head>
  7.   <body>
  8.     <div id="app">{{ msg }}</div>
  9.   </body>
  10. </html>
复制代码
webpack.dev.js

   打包生产时也要加上此设置
  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. module.exports = {
  5.   // ...
  7.   resolve: {
  8.     alias: {
  9.       vue$: 'vue/dist/vue.esm-bundler.js' // 包含编译器的构建版本
  10.     }
  11.   }
  12. }
复制代码
8、全局加载 Element plus

   全局加载打包后项目偏大，但设置简朴
  安装

  1. npm install element-plus
复制代码
package.json

  1. {
  2.   // ...
  3.   "dependencies": {
  4.     "vue": "^3.5.13",
  5.     "element-plus": "^2.9.6"
  6.   }
  7.   // ...
  8. }
复制代码
main.js

  1. // ...
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import ElementPlus from 'element-plus'
  5. import 'element-plus/dist/index.css'
  6. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  8. const app = createApp(App)
  10. app.use(ElementPlus, {
  11.   locale: zhCn
  12. })
  14. app.mount('#app')
复制代码
8.1、按需加载 Element plus

   按需加载打包后项目偏小，但设置复杂，而且必要安装插件
  安装插件

   安装旧版，因最新版默认导出 ESM 格式，不支持 CommonJS 格式
  1. npm install unplugin-auto-import@0.16.1 unplugin-vue-components@0.25.1 --save-dev
复制代码
main.js

   无需设置，如之前已设置全局 Element plus，需去掉
  1. // ...
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  5. const app = createApp(App)
  6. app.mount('#app')
复制代码
App.vue

   使用方法，并设置国际化
  1. <template>
  2.   <el-config-provider :locale="zhCn">
  3.     <el-button type="primary" @click="testOpen('test')">test</el-button>
  4.   </el-config-provider>
  5. </template>
  7. <script setup>
  8. import { ref } from 'vue'
  9. import { ElConfigProvider } from 'element-plus'
  10. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  12. const testOpen = (name) => {
  13.   ElMessage('this is a message.')
  14. }
  15. </script>
复制代码
webpack.dev.js

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const { VueLoaderPlugin } = require('vue-loader')
  4. const AutoImport = require('unplugin-auto-import/webpack')
  5. const Components = require('unplugin-vue-components/webpack')
  6. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  8. module.exports = {
  9.   // ...
  11.   plugins: [
  12.     // ...
  13.     AutoImport({
  14.       resolvers: [ElementPlusResolver()]
  15.     }),
  16.     Components({
  17.       resolvers: [ElementPlusResolver()]
  18.     })
  19.   ]
  21.   // ...
  22. }
复制代码
9、axios

   哀求 axios
  安装

  1. npm install axios
复制代码
package.json

  1. {
  2.   // ...
  3.   "dependencies": {
  4.     "vue": "^3.5.13",
  5.     "element-plus": "^2.9.6",
  6.     "axios": "^1.8.4"
  7.   }
  8.   // ...
  9. }
复制代码
创建 api.js

   在 src 目录下创建 api.js
  1. import axios from 'axios'
  3. const api = axios.create({
  4.   baseURL: 'http://localhost:9000',
  5.   timeout: 60000,
  6.   headers: { ['Content-Type']: 'application/x-www-form-urlencoded' }
  7.   // withCredentials: true // 跨域请求时是否需要使用凭证（携带cookie）
  8. })
  10. // 请求拦截器
  11. api.interceptors.request.use(
  12.   (req) => {
  13.     return req
  14.   },
  15.   (err) => {
  16.     return Promise.reject(err)
  17.   }
  18. )
  20. // 响应拦截器
  21. api.interceptors.response.use(
  22.   (res) => {
  23.     return res.data
  24.   },
  25.   (err) => {
  26.     return Promise.reject(err)
  27.   }
  28. )
  30. const { get, post, put, delete: del } = api
  32. export const testGet = (params) => {
  33.   return get('/tianqiApi', { params })
  34. }
复制代码
App.vue

  1. <template>
  2.   <!-- // ... -->
  3. </template>
  5. <script setup>
  6. // ...
  8. import { testGet } from './api'
  10. const testApi = async () => {
  11.   try {
  12.     const res = await testGet()
  13.     console.log(res)
  14.   } catch (error) {
  15.     console.log(error)
  16.   }
  17. }
  19. testApi()
  20. </script>
复制代码
完备设置 webpack.dev.js

   开辟设置
  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const { VueLoaderPlugin } = require('vue-loader')
  4. const AutoImport = require('unplugin-auto-import/webpack')
  5. const Components = require('unplugin-vue-components/webpack')
  6. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  8. module.exports = {
  9.   mode: 'development', // 开发模式
  11.   // 入口文件
  12.   entry: {
  13.     dev_index: './src/main.js' // 这个对象的键名会传递到下面的'[name].bundle.js'中的 name
  14.   },
  16.   // 输出文件
  17.   output: {
  18.     filename: '[name].bundle.js', // 输出文件名
  19.     path: path.resolve(__dirname, 'dist') // 输出文件目录
  20.   },
  22.   devtool: 'inline-source-map', // 开启source-map
  24.   devServer: {
  25.     static: './dist', // 静态资源目录
  26.     hot: true, // 开启模块热更新
  27.     port: 8080, // 端口号
  28.     open: true, // 自动打开浏览器
  29.     watchFiles: ['./src/index.html'], // 监听文件变化（自动刷新页面）
  30.     client: {
  31.       logging: 'none' // 关闭客户端日志
  32.       // logging: 'error', // 仅显示错误
  33.     }
  34.   },
  36.   plugins: [
  37.     new HtmlWebpackPlugin({
  38.       title: 'template5-dev', // 生成的HTML文件标题
  39.       filename: 'index.html', // 生成的HTML文件名
  40.       template: './src/index.html', // 不配置此项，默认生成index.html；配置此项传递自定义HTML文件
  41.       favicon: path.join(__dirname, './src/img/favicon.ico')
  42.     }),
  43.     new VueLoaderPlugin(), // 添加VueLoaderPlugin
  44.     AutoImport({
  45.       resolvers: [ElementPlusResolver()]
  46.     }),
  47.     Components({
  48.       resolvers: [ElementPlusResolver()]
  49.     })
  50.   ],
  52.   module: {
  53.     rules: [
  54.       {
  55.         test: /\.css$/i, // 匹配css文件
  56.         use: ['style-loader', 'css-loader'] // 使用loader
  57.       },
  58.       {
  59.         test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
  60.         use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '[name].[ext]', outputPath: 'images' } }], // 使用loader
  61.         type: 'javascript/auto' // 解决图片打包后路径问题
  62.       },
  63.       {
  64.         test: /\.vue$/,
  65.         loader: 'vue-loader'
  66.       }
  67.     ]
  68.   }
  69. }
复制代码
完备设置 webpack.prod.js

   生产设置
  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const TerserPlugin = require('terser-webpack-plugin')
  4. const { VueLoaderPlugin } = require('vue-loader')
  5. const AutoImport = require('unplugin-auto-import/webpack')
  6. const Components = require('unplugin-vue-components/webpack')
  7. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  9. module.exports = {
  10.   mode: 'production', // 生产模式
  12.   // 入口文件
  13.   entry: {
  14.     index: './src/main.js' // 这个对象的键名会传递到下面的'[name].bundle.js'中的 name
  15.   },
  17.   // 输出文件
  18.   output: {
  19.     publicPath: './', // 输出文件路径前缀
  20.     filename: '[name].js', // 输出文件名
  21.     path: path.resolve(__dirname, 'dist'), // 输出文件目录
  22.     clean: true // 每次构建前清理dist目录
  23.   },
  25.   plugins: [
  26.     new HtmlWebpackPlugin({
  27.       title: 'template5', // 生成的HTML文件标题
  28.       filename: 'index.html', // 生成的HTML文件名
  29.       template: './src/index.html', // 不配置此项，默认生成index.html；配置此项传递自定义HTML文件
  30.       favicon: path.join(__dirname, './src/img/favicon.ico')
  31.     }),
  32.     new VueLoaderPlugin(), // 添加VueLoaderPlugin
  33.     AutoImport({
  34.       resolvers: [ElementPlusResolver()]
  35.     }),
  36.     Components({
  37.       resolvers: [ElementPlusResolver()]
  38.     })
  39.   ],
  41.   module: {
  42.     rules: [
  43.       {
  44.         test: /\.css$/i, // 匹配css文件
  45.         use: ['style-loader', 'css-loader'] // 使用loader
  46.       },
  47.       {
  48.         test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件
  49.         use: [{ loader: 'url-loader', options: { limit: 6000, esModule: false, name: '[name].[ext]', outputPath: 'images' } }], // 使用loader
  50.         type: 'javascript/auto' // 解决图片打包后路径问题
  51.       },
  52.       {
  53.         test: /\.vue$/,
  54.         loader: 'vue-loader'
  55.       }
  56.     ]
  57.   },
  59.   optimization: {
  60.     minimizer: [
  61.       new TerserPlugin({
  62.         terserOptions: {
  63.           compress: {
  64.             drop_console: true // 移除所有 console.*
  65.           },
  66.           format: {
  67.             comments: false // 移除所有注释
  68.           }
  69.         },
  70.         extractComments: false // 禁止生成独立的注释文件
  71.       })
  72.     ]
  73.   }
  74. }
复制代码
完备设置 package.json

  1. {
  2.   "name": "template5",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "npx webpack serve --config webpack.dev.js",
  8.     "build": "npx webpack --config webpack.prod.js"
  9.   },
  10.   "keywords": [],
  11.   "author": "",
  12.   "license": "ISC",
  13.   "dependencies": {
  14.     "axios": "^1.8.4",
  15.     "element-plus": "^2.9.6",
  16.     "vue": "^3.5.13"
  17.   },
  18.   "devDependencies": {
  19.     "webpack": "^5.98.0",
  20.     "html-webpack-plugin": "^5.6.3",
  21.     "webpack-dev-server": "^5.2.0",
  22.     "style-loader": "^4.0.0",
  23.     "css-loader": "^7.1.2",
  24.     "url-loader": "^4.1.1",
  25.     "vue-loader": "^17.4.2",
  26.     "terser-webpack-plugin": "^5.3.14",
  27.     "unplugin-auto-import": "^0.16.1",
  28.     "unplugin-vue-components": "^0.25.1"
  29.   }
  30. }
复制代码
完备目录布局

  1. src
  2. |- img
  3. |  |- favicon.ico
  4. |- css
  5. |  |- index.css
  6. |- api.js // api文件
  7. |- main.js // 入口文件
  8. |- index.html // html文件
  9. |- App.vue // vue文件
  10. package.json
  11. webpack.dev.js
  12. webpack.prod.js
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

灌篮少年

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表