什么是webpack
Webpack是一个打包模块化 javascript 的工具,它会从 main.js 出发,识别出源码中的模块化导入语句,递归地找出入口文件的所有依赖,将入口和其所有依赖打包到一个单独的文件中。
Loader机制的作用是什么?
webpack默认只能打包js文件,配置里的module.rules数组配置了一组规则,告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换打包成js。
注意:
- use属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;
- 每一个 Loader 都可以通过 URL querystring 的方式传入参数,例如css-loader?minimize中的minimize告诉css-loader要开启 CSS 压缩。
常用loader
css-loader
读取 合并CSS 文件
style-loader
把 CSS 内容注入到 JavaScript 里
sass-loader
解析sass文件(安装sass-loader,node-sass)
postcss-loader
自动添加浏览器兼容前缀(postcss.config配置)
url-loader
将文件转换为base64 URI。
vue-loader
处理vue文件
Plugin(插件)的作用是什么?
Plugin 是用来扩展 Webpack 功能的,通过在构建流程里注入钩子实现,它给 Webpack 带来了很大的灵活性。
Webpack 是通过plugins属性来配置需要使用的插件列表的。plugins属性是一个数组,里面的每一项都是插件的一个实例,在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。
常见Plugins
HtmlWbpackPlugin
自动在打包结束后