这两天摆弄webpack，躺过很多坑，直到今天看了一位博主的文章才得以解决。他对配置中的各个部分做说明。
下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html
安装package.json中的node-sass可能因为网络原因不能成功安装
报错信息有一大串，其中提及python和gyp，其实不用去安装他们。只要执行下面的命令：
npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm i node-sass -D
以下为一个vue项目的基本配置：
项目根目录：
{ "name": "shop", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "clean": "rimraf dist", "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.conf.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.dev.conf.js", "start": "npm run clean && npm run build" }, "author": "asd", "license": "ISC", "devDependencies": { "@babel/core": "^7.2.2", "@babel/plugin-transform-runtime": "^7.2.0", "autoprefixer": "^9.4.6", "babel-loader": "^8.0.5", "babel-plugin-transform-remove-console": "^6.9.4", "clean-webpack-plugin": "^1.0.1", "cross-env": "^5.2.0", "css-loader": "^2.1.0", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.11.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0", "rimraf": "^2.6.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "uglifyjs-webpack-plugin": "^2.1.1", "url-loader": "^1.1.2", "vue-loader": "^15.6.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.5.22", "webpack": "^4.29.0", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14", "webpack-merge": "^4.2.1" }, "dependencies": { "@babel/preset-env": "^7.3.1", "@babel/runtime": "^7.3.1", "axios": "^0.18.0", "body-parser": "^1.18.3", "cookie-parser": "^1.4.4", "express": "^4.16.4", "glob-all": "^3.1.0", "mongoose": "^5.4.11", "vue": "^2.5.22", "vue-lazyload": "^1.2.6", "vue-router": "^3.0.2" } }