34.基于webpack搭建开发环境

本文介绍: 基于 webpack 搭建开发环境

一、webpack 配置问题
 webpack确实强大，但是配置 loader、plugin也确实存在与node、npm、webpack 版本之间存在冲突的问题（真正的从入门到放弃）。为了方便平时的开发，我基于 webpack4.x 整合了react、vue3、ts 开发环境，支持 less、eslint、babel等，具体详见package.json。

二、下载后可以根据自己的实际需求修改 package.json。下载地址：https://gitee.com/jly1314520/my–webpack.git。

{
  "name": "testwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack",
    "server": "webpack-dev-server --open",
    "mpa": "webpack --config ./webpack.mpa.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.3.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "eslint": "^8.54.0",
    "eslint-config-semistandard": "^17.0.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "glob": "^7.1.6",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.5.0",
    "less-loader": "^7.1.0",
    "mini-css-extract-plugin": "^1.3.3",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^17.3.1",
    "vue-template-compiler": "^2.7.15",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "axios": "^0.21.1",
    "core-js": "^2.6.12",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "vue": "^3.3.8"
  }
}