列举 plugins and loaders
- Webpack
- webpack
- webpack-cli
- webpack-dev-server
- CSS
- postcss-loader + autoprefixer(浏览器兼容性)
- optimize-css-assets-webpack-plugin(压缩css文件)
- style-loader(内联css到html)
- css-loader(处理模块化css)
- sass-loader/node-sass(处理scss)
- mini-css-extract-plugin(抽离css)
- JavaScript
- babel-core
- babel-loader
- babel-plugin-transform-decorators + babel-plugin-transform-decorators-legacy (装饰器)
- babel-plugin-transform-runtime(ES7+:generator、iterator、async、await)
- babel-preset-latset 或者 babel-preset-env(比前者后发布)【babel预设】
- uglifyjs-webpack-plugin(压缩js)
- html
- html-webpack-plugin(处理html,添加script标签)
- clean-webpack-plugin(打包前清除文件)
- 文件
- file-loader(识别、处理文件路径)
- url-loader(通过图片大小判断是转成 base64 还是用原图片、重命名图片)
- url-loader 包含 file-loader ,不用再安装 file-loader
- image-webpack-plugin(图片压缩)
- node
- 网络请求
- vue
- vue-style-loader(处理vue文件中css,最终内联到html文件中的head去)
模块、插件、组件
- 模块
- module
- 功能集合、实现功能的方法、完成一系列功能的方法集合
- 完成一个功能的封装,都叫模块
- 插件
- plugin
- 可复用的模块
- 分页器、轮播图、可定制化、new一个就是个新实例
- 复用性高
- 组件
- 拆分逻辑结构和样式
- 通过一个js文件导入模板与样式,最终导出出去供外界使用
- ES6
- 推崇模块化开发、组件化开发
- import export
- 压缩混淆、转es5、es3
- 通过组件化写项目,最后通过各种打包工具变成浏览器能识别的页面
- 在 src 中写,维护
- 在 dist 中打包,上线
命令行基本命令