webpack5构建基于Vue3+ElementPlus项目搭建(开发和生产)

项目基于webpack5+vue3+ElementPlus环境构建
主要配置文件:
package.json 插件使用和版本配置等信息
.eslintrc.js 启用eslint检测代码规范
babel.config.js es语法兼容配置
config
│ ├─ webpack.base.js 开发和生产公共配置文件
│ ├─ webpack.dev.js 开发环境配置
│ └─ webpack.prod.js 生产打包环境配置

package.json

{
  "name": "vue3-elementPlus-project",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "element-plus": "^2.2.17",
    "vue": "^3.2.40",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/eslint-parser": "^7.19.1",
    "@vue/cli-plugin-babel": "^5.0.8",
    "babel-loader": "^8.2.5",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.1.0",
    "eslint": "^8.24.0",
    "eslint-plugin-vue": "^9.5.1",
    "eslint-webpack-plugin": "^3.2.0",
    "html-webpack-plugin": "^5.5.0",
    "image-minimizer-webpack-plugin": "^3.6.1",
    "imagemin": "^8.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.2",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.6",
    "unplugin-auto-import": "^0.11.2",
    "unplugin-vue-components": "^0.22.7",
    "vue-loader": "^17.0.0",
    "vue-style-loader

你可能感兴趣的:(vue2/vue3全家桶,自动化构建工具,webpack,vue.js,javascript)