webpack是什么?作用是什么? 默认的入口文件什么?
webpack是什么?
- webpack的诞生之初主要是想解决代码的拆分问题。
- webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。
作用是什么?
代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
- 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包，来保证我们项目结构的清晰和可读性。
- 编译兼容。在以前，我们总是要手写一堆浏览器兼容代码，这让人很头皮发麻，而在今天这个问题被大大的弱化了，通过
webpack的Loader机制，对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。- 能力扩展。通过
webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。
默认的入口文件什么?
webpack 默认的入口文件是
src/index.js，我们可以通过在webpack.config.js中去配置entry属性来对入口文件进行修改。module.exports = { entry: './public/index.js' }#默认入口文件 ./src/index.js #默认出口文件 ./dist/main.js
webpack打包命令是什么? 打包的文件默认存在什么地方?
- 打包命令
npm run build(这个命令会告诉
webpack打包工具去执行package.json里面的scripts对象的build的脚本，也就是说实际执行的是webpack --config webpack.prod.js) 。
- 打包的文件默认存在:
根路径/dist/main.js
webpack的loader有哪些? 作用是什么? babel的作用是什么?
webpack的loader有哪些?以及作用
在页面开发过程中，我们经常性加载除了 js 文件以外的内容，这时候我们就需要配置响应的 loader 进行加载
常见的 loader 如下：
- style-loader: 将 css 添加到 DOM 的内联样式标签 style 里
- css-loader :允许将 css 文件通过 require 的方式引入，并返回 css 代码
- less-loader: 处理 less
- sass-loader: 处理 sass
- postcss-loader: 用 postcss 来处理 CSS
- autoprefixer-loader: 处理 CSS3 属性前缀，已被弃用，建议直接使用 postcss
- file-loader: 分发文件到 output 目录并返回相对路径
- url-loader: 和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url
- html-minify-loader: 压缩 HTML
- babel-loader :用 babel 来转换 ES6 文件到 ES
babel的作用是什么?
babel是一个node命令行工具,将es6语法转换为浏览器能解析的es5语法的一种工具
webpack的plugin有哪些(HtmlWebpackPlugin和webpack-dev-server)?作用是什么?
常见的plugin
BannerPlugin：在每个生成chunk顶部添加banner
CopyWebpackPlugin：将单个文件或整个目录复制到构建目录
DefinePlugin：允许在编译时配置的全局变量
ContextReplacementPlugin：重写requier表达式的推断上下文
IgnorePlugin：从bundel中排出某些模块
HtmlWebpackPlugin和webpack-dev-server的作用是什么？
HtmlWebpackPlugin的作用：简单创建HTML文件，用于服务器访问
webpack-dev-server的作用：
- webpack-dev-server是webpack官方提供的一个小型node.js Express服务器。使用它可以为webpack打包生成的资源文件提供web服务
**主要提供两个功能：**为静态文件提供服务、自动刷新和热替换
通过配置proxy实现请求转发，即当接口域名发生改变时，我们不用一个一个修改接口，只要修改配置项的域名就可以了
通过配置historyFallback为true，解决请求不到页面问题，如果访问除根路径以外的地址，最终都会转向去请求根路径。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ty28XPz-1656764954836)(https://segmentfault.com/img/remote/1460000018695137/view?w=1392&h=1724)]
Plugin的特性
- 是一个独立的模块
- 模块对外暴露一个 js 函数
- 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法
- apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，如果是异步编译插件的话可以拿到回调 callback
- 完成自定义子编译流程并处理 complition 对象的内部数据
- 如果异步编译插件的话，数据处理完成后执行 callback 回调