js 之 webpack常用配置、vue.config.js

注意：以下全部是手动配置webpack，没用vue-cli（脚手架）

// package.json

{
  "name": "index.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",  // npm run build 时自动执行本项目的webpack，而不是全局的webpack（webpack用于项目打包，从入口文件打包到出口文件）
    "dev": "webpack-dev-server --open"  // 执行npm run dev时，启动本地服务（即：在webpack.config.js中配置的devServer），--open启动时自动打开浏览器
  },
  "author": "",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.1.5"
  },
  "dependencies": {
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "vue": "^2.5.21"
  }
}

webpack.config.js的抽离（vue-cli的写法）： 新建build文件夹进行抽离（具体过程参考codewhy的webpack视频第90集）

// package.json

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config  ./build/prod.config.js",  //npm run build 时，执行与package.json同目录的./build/prod.config.js
    "dev": "webpack-dev-server --open --config ./build/dev.config.js "  // 执行npm run dev时，执行与package.json同目录的build/dev.config.js
  },

使用vue-cli3的vue.config.js配置webpack vue.config.js配置参考：https://cli.vuejs.org/zh/config/ 注意：vue.config.js要和package.json在同一个目录下