webpack的小结

webpack起步

虽然后期都是脚手架自动生成，但是也需要熟悉webpack相关的配置东西，方便日后的项目写作。

webpack起步

1. 安装node.js ，安装完成之后使用 node-v 进行查看版本；
2. 在完成安装之后，安装webpack版本 npm install webpack@3.6.0 -g 全局安装；
3. webpack --version 查看安装版本
4. 终端语法 ->webpack ./src/main.js ./dist/bundle.js 打包JS文件

webpack的配置

• 通过npm init来生成package.json npm管理的文件
• npm install 是package.json包的依赖的东西 需要通过这个命令来创建package-lock.json

npm run dev的配置相关的东西

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server  --open  --config ./build/prod.config.js"
  }

入门时webpack中容易踩一个版本过高的坑

webpack打包css报错（已解决）：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

手动改一下版本就可以了
这是我在使用webpack打包css时，出现的一个错误，导致css无法打包 原因是 css-loader 和 style-loader 版本过高

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.3.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^4.1.1",
    "less-loader": "^4.1.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^13.7.3",
    "vue-template-compiler": "^2.6.13",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.0.0"

build的文件

把webpack.config.js进行了抽离成了三个文件

• base.config 公共的 dev.config 开发时 prod.config 生产时

npm install webpack-merge --save-dev 文件合并