其他自动化构建工具

  • gulp
  • grunt

常见解析器

  • css-loader
  • style-loader
  • url-loader
  • file-loader
  • vue-loader
  • react-resen
  • sass-loader
  • babel-loader
  • html-loader
  • vue-style-loader

第二章

什么时候用插件？

webpack 的入口文件引入的每个文件，都需要一个 load 才可以被 webpack 解析。

常用插件

  • vue-template-compiler
  • html-webpack-plugin
  • friendly-errors-webpack-plugin
  • babel-preset-react
  • extract-text-webpack-plugin | optimize-css-assets-webpack-plugin

webpack 环境

  • prodution 生产环境
  • development 开发环境

入口（entry）
输出（output）
loader
插件（plugins）
mode 配置环境变量

入口【entry】

输出【output】

loader
错误!未指定文件名。错误!未指定文件名。
在更高层面，在 webpack 的配置中 loader 有两个目标：
​

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

以上在 webpack 5.x 中一些插件不兼容所以我们要记住一些插件
“html-webpack-plugin”: “^5.0.0-alpha.15”,//打包 html
“webpack-dev-server”: “^4.0.0-beta.0”,//起服务
//使用 vue 所需插件
​”vue-loader”: “^15.9.5”,
​”vue-style-loader”: “^4.1.2”,
​”vue-template-compiler”: “^2.6.12”
//使用 css/sass 所需插件
​”css-loader”: “^5.0.1”,
​”node-sass”: “^5.0.0”,
​”sass”: “^1.30.0”,
​”sass-loader”: “^10.1.0”,
​”style-loader”: “^2.0.0”,
​”stylus”: “^0.54.8”,
​”stylus-loader”: “^4.3.1”,
//使用图片所需插件
“file-loader”: “^6.2.0”,
“url-loader”: “^4.1.1”,
​”fibers”: “^5.0.0”,
插件【plugins】
​



​

友好的报错提示信息
npm install –save-dev friendly-errors-webpack-plugin